There are several ways of styling a React application, From inline styling, CSS, SASS and to using styling libraries like JSS and styled-components and much more.
In this tutorial, I'll be walking you through ways you can apply styles to your Reactjs application.
Table of Content
- Inline Styling
- CSS-in-CSS
- CSS-in-JS
Inline Styling
The simplest way of styling in Reactjs is the inline styling because you don't need to install or import an external resource, just plain javascript. Here an element has its own style. Just like the normal way of applying an inline style to an HTML element.
Here is an example:
import React from 'react'
function App(){
return(
<div style={{width:100,padding:"20px",backgroundColor:"#000000"}}>
<h1 style={{
fontSize:"10px",
color: "#ffffff",
textAlign: "center"
}}>
Styling React App </h1>
</div>
)
}
export default App
You can also declare the styles as a variable outside the function.
As an individual object variable and using them where you need:
import React from 'react'
function App() {
return (
<div style={divStyles}>
<h1 style={headingStyles}> Styling React App </h1>
</div>
)
}
const divStyles = {
width: 100,
padding: "20px"
}
const headingStyles = {
fontSize: "10px",
color: "#fff",
textAlign: "center"
}
export default App
or as a nested object:
import React from 'react'
function App() {
return (
<div style={styles.container}>
<h1 style={styles.heading}>Styling React App </h1>
</div>
)
}
const styles = {
container: {
width: 100,
padding: "20px"
},
heading: {
fontSize: "10px",
color: "#fff",
textAlign: "center"
}
}
export default App
Creating styles as variables makes it possible to use with other elements.
Styles can be passed in as props too:
import React from 'react'
function App() {
return (
<div style={styles.container}>
<Heading style={styles.heading}>Styling React App </Heading>
</div>
)
}
const Heading = (props) => {
return (
)
};
const styles = {
container: {
width: 100,
padding: "20px"
},
heading: {
fontSize: "10px",
color: "#fff",
textAlign: "center"
}
}
export default App
Note: When using inline styling or when styling with JavaScript, always adhere to this:
- Property names should be written in camelCase: properties that has two names joined together with a dash(-) in CSS should be written in camelCase, e.g.:
background-color
should be written as
backgroundColor
- String values should be written in quotes, e.g.:
textAlign: "center"
- Properties are separated by a comma (,) e.g.:
...
width:100,
backgroundcolor: "blue"
...
.
CSS-in-CSS
In this part, we would look at different ways of styling with Pure CSS or call it Vanilla CSS and Sass.
Vanilla CSS (CSS in React and Sass in React).
This is the most basic way of styling your application, using your vanilla CSS(your own style or a CSS library like Bootstrap, materialize etc) by importing it and referencing them in your element.
Create your CSS styles (or CSS libraries)
/*main.css*/
.container {
width: 400px;
height: 300px;
padding: 10px 20px;
margin: 10px;
background-color: rgb(0, 0, 255);
}
.heading {
display: inline-block;
color: #ffffff;
font-size: 38px;
}
then import it to your application
import React from 'react'
import './main.css'
function App() {
return (
<div className="container">
<h1 className="heading">Using CSS in React</h1>
</div>
)
}
export default App
Simple Right?, Yeah.
Importing Sass file (.scss):
If your application was setup using create-react-app sass compiler is installed already you just need to go ahead and import it, if not you need to install it and make some configurations before using it.
Here is an example:
/*styles.scss*/
.container {
width: 400px;
height: 300px;
padding: 10px 20px;
margin: 10px;
background-color: rgb(0, 0, 255);
.heading {
display: inline-block;
color: #ffffff;
font-size: 38px;
}
}
then import it
import React from 'react'
import './styles.scss'
function App() {
return (
<div className="container">
<h1 className="heading">Using SCSS in React</h1>
</div>
)
}
export default App
CSS modules (CSS and Sass)
The great thing about using create-react-app for bootstrapping/setting-up your react application is that it comes with built-in compilers and transpilers so you don't need to install them separately, like when using CSS modules, you don't need to install it because it comes with it, you just go ahead and use it.
CSS modules is another way of using CSS in your React Application using your styles as modules, here is how:
/*styles.module.css*/
.container {
width: 400px;
height: 300px;
padding: 10px 20px;
margin: 10px;
background-color: rgb(0, 0, 255);
}
.heading {
display: inline-block;
color: #ffffff;
font-size: 38px;
}
Note: Your CSS file must be saved with (.module.css), like in the example above the CSS file is saved as styles.module.css,
Using the created CSS file, it should be imported as a module (as the name implies: CSS modules), and used with the className attribute.
import React from 'react'
import styles from './styles.module.css'
function App() {
return (
<div className={styles.container}>
<h1 className={styles.heading}>Using CSS in React</h1>
</div>
)
}
export default App
How about Sass file (.scss)?
The same applies to .SASS files but its extention should end with (.module.scss), example: mainStyles.module.scss.
here is an example:
/*main-style.module.scss*/
.container {
width: 400px;
height: 300px;
padding: 10px 20px;
margin: 10px;
background-color: rgb(0, 0, 255);
.heading {
display: inline-block;
color: #ffffff;
font-size: 38px;
}
}
then import it to your application
import React from 'react'
import styles from './main-style.module.scss'
function App() {
return (
<div className={styles.container}>
<h1 className={styles.heading}>Using SCSS in React</h1>
</div>
)
}
export default App
That's it for CSS-in-CSS.
CSS-in-JS
There are several ways of styling a react application using this approach, but I will be pointing out only 2 JSS and Styled-Components.
JSS (CSS+JS=JSS)
JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.
React-JSS integrates JSS with React using the new Hooks API. JSS and the default preset are already built-in.
Install
Before using JSS you have to install it, you can install it using yarn
> yarn add react-jss
Usage
First of all, you create your style by importing its createUseStyle hook
import React from 'react'
import {createUseStyles} from 'react-jss'
...
Then Create your Styles, React-JSS uses the default preset, most plugins are available without further configuration needed.
...
const useStyles = createUseStyles({
container: {
color: 'green',
margin: {
// jss-plugin-expand gives more readable syntax
top: 30,
right: 2,
bottom: '1rem',
left: 'auto'
}
},
heading: {
fontWeight: 'bold',
fontSize: 38 // jss-plugin-default-unit makes this 38px
}
})
...
Then Define the component using these styles and pass it the 'classes' prop.
Use this to assign scoped class names.
function App() {
const classes = useStyles();
return (
<div className={classes.container}>
<h1 className={classes.heading}>Using JSS in React</h1>
</div>
)
}
This will compile to
//HTML equivilent
<div class="Div-container-1-25">
<h1 class="Div-heading-1-26">Using JSS in React</h1>
</div>
//CSS equivalent
.Div-container-1-25 {
color: green;
margin: 30px 2px 1rem auto;
}
.Div-heading-1-26 {
font-weight: bold;
font-size:38px;
}
You can dive into Learning React-JSS here.
Styled Components
Styled Components let you create a normal React component, that has your styles attached to it.
Install
To use styled-components in your project, you need to install it by running this:
npm install --save styled-components
with no further build configurations, go ahead and use it.
Usage
Using styled-components is quite easy, to create styled-component you have to import styled:
import styled from 'styled-components'
let's create a reusable button
Create a Button component that'll render a <button> tag with some styles
const Button = styled.button`
background: #fed11e88;
border-radius: 3px;
border: 2px solid #fcd224;
color: #feb954;
margin: 0 1em;
padding: 17px;`
Use Button like any other React component – except it's styled.
function App() {
return (
<div>
<Button>Click Me</Button>
</div>
)
}
In styled-component, you can use all the features of CSS you use, including media queries, all pseudo-selectors, nesting, etc.
To see more of styled-components check out it's docs.
Summary
I have been able to highlight some of the ways you can style your React Application. In my subsequent articles, I will elaborate more on individual approaches.
Thanks For Reading.
A Big Thank You to Edidiong Asikpo for Proofreading.