Using Vanilla CSS with React?

Question

Using Vanilla CSS with React?

This is my first time working on a react app and I'm a bit unsure of the best approach to styling components. Currently, I am creating a separate .css file for each component or page, and including it implicitly. While this method seems the simplest, I am aware that there are some drawbacks. I'm not sure if this is considered a bad practice. Should I be using styled components/css modules instead, or does it not make a significant difference in the end?

javascript css reactjs

Answer 1

Answer №1

If you're deciding between styled components and vanilla CSS (with BEM), choose the one that best suits your needs.

I have experience with both and believe that both have their merits, but there are some distinctions between them.

For instance, if you need to use variables throughout all components (such as themes), styled components require you to use ThemeProvider and then consume it like this:

const FancyDiv = styled.div`
    background: ${props => props.theme.colors.main)``;

On the other hand, with vanilla CSS, you need to import a CSS file in each component's CSS file, like this in SCSS:

// src/components/fancyDiv/styles.scss

@import '../../styles/settings.scss';

.fancyDiv {
    background: $main-color;
}

Another difference arises when you need to style an element based on props or state. Consider a scenario where you want to style a navigation link based on whether it is active or not.

const [isActive, setIsActive] = useState(false);

Using styled components:

const FancyLink = styled.a`
    color: ${props => props.isActive ? 'red' : 'green'}`;

<FancyLink href="#aboutme" isActive={isActive}>About me</FancyLink>

With vanilla CSS:

.nav__link--active {
    color: 'red';
}

<a href="#aboutme" className=`nav-link ${isActive ? 'nav__link--active' : ''}`>About me</a>

Both approaches have their strengths and can be suitable for various situations, albeit in slightly different ways.

Answer 2

If you're deciding between styled components and vanilla CSS (with BEM), choose the one that best suits your needs.

I have experience with both and believe that both have their merits, but there are some distinctions between them.

For instance, if you need to use variables throughout all components (such as themes), styled components require you to use ThemeProvider and then consume it like this:

const FancyDiv = styled.div`
    background: ${props => props.theme.colors.main)``;

On the other hand, with vanilla CSS, you need to import a CSS file in each component's CSS file, like this in SCSS:

// src/components/fancyDiv/styles.scss

@import '../../styles/settings.scss';

.fancyDiv {
    background: $main-color;
}

Another difference arises when you need to style an element based on props or state. Consider a scenario where you want to style a navigation link based on whether it is active or not.

const [isActive, setIsActive] = useState(false);

Using styled components:

const FancyLink = styled.a`
    color: ${props => props.isActive ? 'red' : 'green'}`;

<FancyLink href="#aboutme" isActive={isActive}>About me</FancyLink>

With vanilla CSS:

.nav__link--active {
    color: 'red';
}

<a href="#aboutme" className=`nav-link ${isActive ? 'nav__link--active' : ''}`>About me</a>

Both approaches have their strengths and can be suitable for various situations, albeit in slightly different ways.

Using Vanilla CSS with React?

Answer №1

Similar questions

Is there a way to turn off the auto-complete feature for JavaScript keywords in HTML within JSX in WebStorm?

Nested data selection in React

Leverage JavaScript to customize the appearance of existing links within an external HTML document

Navigate to a specific section of a webpage with automatic scrolling

Trouble persisting values with Heroku due to variable issues

Issue with Material UI: Unable to utilize import statement outside of a module due to Select dependency

Using Angular 6 to import GeoJSON into a Leaflet map

Troubleshooting MaterialUI: Is there a way to prevent the InputLabel text from disappearing when setting a background color on the Select component?

Showing a series of JavaScript countdowns consecutively

What is the best way to eliminate all frames from the current windows using jQuery?

Tips for resolving validation errors when adding to MongoDB in a MERN application

Having trouble sending a POST request with body parameters in Node.js? The error "undefined req.body.param" might be popping up when you're

Form-check radio buttons within the form-check-inline class of Bootstrap 4.1.1

I have been attempting to execute 'npm run build' for my React application using Tailwind CSS, but it keeps displaying errors

Selecting an object from JSON data with Angular using $routeParams

How can we display data from the database in a table if the data is stored as a string separated by commas using Ajax?

The webpack command in the terminal failed to locate the file /config/webpack/development.js

Is there a problem with Chrome's display?

When adjusting the month/year, the Material Date Picker extends beyond its container

What is the best way to add a new element with specified text to a group of chosen HTML elements?