React Component Styling

The Bit official React environments, supports CSS Modules using Less, CSS or SCSS or CSS-in-JS styling using native or community libraries.

CSS modules are useful for components, as styles are being encapsulated properly. 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

To use SCSS for styling, add a file named card.scss:

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

Use the SCSS file as a module from your React component:

import './card.scss';

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

To use less for styling, add a file named card.less to your component with the following content:

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

Use the .less file as module from your React component:

import './card.less';

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

You can also include global css in your components. You should consider global styles might cause side-effects to other components.

To add global css, create the file card.css in your component:

.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

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

`styled-components` should be configured as a peer dependency. Configure on your `env.jsonc`.
Copied

styled-components can be used by installing the library:

$bit install styled-components

Copied

Use it in your components:

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

To use Tailwind configure the Tailwind CSS Webpack Transformer to enable Tailwind CSS support for your component previews and app bundles.