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 the Tailwind CSS Webpack Transformer to enable Tailwind CSS support for your component previews and app bundles.
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> ); }