React envs support importing CSS files into Javascript.
For example, consider the following stylesheet named card.css
:
.purple-card { background: #8d2ee6; }
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>; }
React envs support importing SCSS files into Javascript.
For example, consider the following stylesheet named card.scss
:
.purple-card { background: #8d2ee6; }
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>; }
React envs support LESS stylesheets.
For example, consider the following stylesheet named card.less
:
.purple-card { background: #8d2ee6; }
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>; }
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; }
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>; }
The simplest CSS-in-JS solution is a standard inline styling:
export function Card({ children }) { return ( <div style={{ backgroundColor: '#818181' }}> <div>{children}</div> </div> ); }
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
:
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> ); }