Options

There are different options for styling a React component. Some of these options include:

  • pure CSS
  • Styled Components
  • Tailwind CSS

For “pure” CSS, the limitation of styling can be implemented as follows on a component like this:

//Header.jsx
import classes from './Header.module.css'

....
<p className={classes.paragraph}>Text</p>

/* Header.module.css */

.paragraph {
	color: red;
}

Dynamic Styling with Tailwind

let labelClasses = 'block mb-2 ....';

if (invalid) {
labelClasses += ' text-red-400';
} else {
 labelClasses += ' text-stone-300';
}

Example Toggle for Changing the Style

import { useState } from 'react';

export default function App() {
    const [highlighted, setHighligted] = useState();
    function toggleStyle() {
        setHighligted(isHighligthed => !isHighligthed);
    }
    return (
        <div>
            <p style={{ color: highlighted ? 'red' : 'white' }}>Style me!</p>
            <button onClick={() => toggleStyle()}>Toggle style</button>
        </div>
    );
}