Styling

React envs support importing CSS files into Javascript.

For example, consider the following stylesheet named card.css:

.purple-card {
  background: #8d2ee6;
}
Copied

Import the CSS file to one of your component's JS files like so:

import './card.css';

export function Card({ children }) {
  return <div className="purple-card">{children}</div>;
}
Copied

See example component.

React envs support importing SCSS files into Javascript.

For example, consider the following stylesheet named card.scss:

.purple-card {
  background: #8d2ee6;
}
Copied

Import the CSS file to one of your component's JS files like so:

import './card.scss';

export function Card({ children }) {
  return <div className="purple-card">{children}</div>;
}
Copied

See example component.

React envs support LESS stylesheets.

For example, consider the following stylesheet named card.less:

.purple-card {
  background: #8d2ee6;
}
Copied

Import the LESS file to one of your component's JS files like so:

import './card.less';

export function Card({ children }) {
  return <div className="purple-card">{children}</div>;
}
Copied

See example component.

React envs do not support Tailwind CSS out of the box. However, you can use Tailwind CSS for your component previews by adding the tailwind script to your preview providers. See an example here.

Use the *.module.* pattern to scope your component names so as to avoid naming collisions.

For example, consider the following stylesheet named card.module.css:

.purpleCard {
  background: #8d2ee6;
}
Copied

Unlike regular style imports, style modules are imported into a named variable:

import styles from './card.module.css';

export function Card({ children }) {
  return <div className={styles.purpleCard}>{children}</div>;
}
Copied

See example component.

The simplest CSS-in-JS solution is a standard inline styling:

export function Card({ children }) {
  return (
    <div style={{ backgroundColor: '#818181' }}>
      <div>{children}</div>
    </div>
  );
}
Copied

See example component.

styled-component (without build-time optimization) can be used by installing it as a regular dependency.

Run the following to install styled-components:

$bit install styled-components

Copied

Use it to implement your component:

import styled from 'styled-components';

const StyledCard = styled.div`
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  &:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  }
`;

export function Card({ children }) {
  return (
    <StyledCard style={{ backgroundColor: '#818181' }}>
      <div>{children}</div>
    </StyledCard>
  );
}
Copied