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:
