Write an article or Share a link

3 Ways to Style React Components

Hints Staff
3 months ago
3 Ways to Style React Components by html hints

There are different ways to style React components. All depend on specific complexity of your application. Let's go through the way which we can use to style React components

If you want to style selected elements, then inline styling is the best option.

# Inline styling

In React, nothing is specified as a string. In react.js, all things which need to be rendered on browser are JSX thats why inline styling are specified with an object whose key is the camelCased version of the style name, and whose value is the style’s value, usually a string.

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. For example:

                    
import React from 'react';

const style-1 = {
  paddingLeft: '40px',
  paddingTop: '40px'
};

const APP = () => (
  <div style={style-1}>
    <p style={{color: 'red'}}>Hello</p>
  </div>
);

export default APP;
                    
                  

We can create a variable that stores style properties and then pass it to the element like style={StyleVariable}

We can also pass the styling directly style={{color: 'red'}}

# CSS Stylesheet

When your React application is complex use of CSS Modules or regular CSS stylesheets would be better option.

                    
import React from 'react';
import './App.css';

const App = () => (
  <div className="App">
    <div className="App_inner">Hello</div>
  </div>
);

export default App;
                    
                  

In above code, I have import css file import './App.css' & you can access css file & style component.

                    
.App {
  padding: 10px;
}

.App_inner {
  background: red;
}
                    
                  

# CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

In React, each React component gets its own CSS file, which is scoped to that file and component. For a React component that you’d like to style, simply create a CSS file that’ll contain the styles for that component.

At build time local class names are mapped and exported as a JS object literal for React- as well as a modified version of input CSS with renamed class names. The result is, you don’t have to mess as much with global styles. When scaling your projects, you have less overrides and trouble on your hands.

                    
import React from 'react';
import styles from './App.css';

const App = () => (
  <div className={styles.container}>
    <p className={styles.content}>Hello</p>
  </div>
);

export default App;
                    
                  

Similar to css we import css file import styles './App.css'

then we access to className as we access to object

                    

 :local(.container) {
  padding: 40px;
}
:local(.content) {
  font-size: 12px;
  background: red;
}
                    
                  

:local(.className)-this when you use create-react-app because of webpack configurations

.className-this if you use your own react boilerplate.

To make CSS modules work with Webpack you only have to include the modules mentioned above and add the following loader to your webpack.config.js file:

React

We use cookies to ensure better User Experience. Read More