Styling

CSS

React envs support importing CSS files into Javascript.

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

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

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>;
}
CopiedCopy

See example component.

SCSS

React envs support importing SCSS files into Javascript.

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

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

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>;
}
CopiedCopy

See example component.

LESS

React envs support LESS stylesheets.

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

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

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>;
}
CopiedCopy

See example component.

Tailwind CSS

React envs do not support Tailwind CSS out of the box. However, you can use the Tailwind CSS Webpack Transformer to enable Tailwind CSS support for your component previews and app bundles.

Style modules

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;
}
CopiedCopy

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>;
}
CopiedCopy

See example component.

CSS-in-JS

Inline styling

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

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

See example component.

Styling libraries

styled-components

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

Run the following to install styled-components:

$bit
Copiedcopy

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>
  );
}
CopiedCopy