Styling in React (CSS-in-JS)
React is a good tool for building flexible and reuseable UI components. However organizing styles in React can be difficult sometimes, I have made quite some research on the internet looking for a better way of writing my CSS for the past 4 month I picked up react, but I seems to fall back to my default ways i.e writing all my CSS in the global file (index.css) then using inline styling to alter any changes I want, until I joined the Swipe team where the front end guys loved styled-components. My first week at Swipe Limited, I was trying to adapt to their culture when given a project to do, and that was how I was introduce to styled-components, at first I thought it has to be another language for me to learn but little did I know it is super cool.
Why My Old Method of styling get messy?
As the Project grows in complexity working with my method of styling becomes stressful and not efficient, as it is difficult for me to maintain the code base anymore and the fact that some styles conflict can be hectic to trace… here comes my saviour.
Introducing styled-components
styled-components is a CSS-in-JS library just like other libraries such as (Radium) etc. that utilises tagged template literals to style your components. it is a way of writing your CSS that’s scoped to a single component, and not leak to any other element in the page. and you don’t have to worry about class name collision. It provides the following features:
- Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically.
- No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
- Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
- conditional rendering: styled-components has something that SASS, LESS, BIM, SMACSS and other approaches don’t have which is conditional rendering. it can decide a style at render time based on the value of the props.
- Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
Getting started
To begin this awesomeness, it takes only a single command npm install styled-components or yarn add styled-components you can as well use an alternative CDN installation if you are not using module bundler. That’s it! then the next thing to do is to import want you’ve install by doing import styled from 'styled-components' in your style file or your react component file.
Writing your first styled component
You have to import the styled-component so we can freely create our own component.
import styled from ‘styled-components’Then the next thing is to get our hands dirty.
export const Button = styled.button `
width: 130px;
border: none;
outline: none;
cursor:pointer;
border-radius: 5px;
padding: 10px 15px;
`To use our newly created styled-component we have to import it in the react component as import {Button} from ‘./pathname’;or if the style is written in our react component, then no need to import, we just use the styled-component created directly as <Button> Submit </Button>
Coming from CSS, If you’re familiar with importing CSS into your components (e.g. like CSSModules) you’ll be used to doing something like this:
import React,{Component} from 'react'
import styles from './styles.css'class Counter extends Component {
state = { count: 0 } increment = () => this.setState({ count: this.state.count + 1 });
decrement = () => this.setState({ count: this.state.count - 1 }); render() {
return (
<div className={styles.counter}>
<p className={styles.paragraph}>{this.state.count}</p>
<button className={styles.button} onClick={this.increment}>
+
</button>
<button className={styles.button} onClick={this.decrement}>
-
</button>
</div>
)
}
}export default Counter;
Because a Styled Component is the combination of the element and the rules that style it, we’d write Counter component like this:
import React,{Component} from 'react'
import styled from 'styled-components'const CounterContainer= styled.div`
/* your css style here*/
`
const Paragraph = styled.p`
/* your css style here */
`
const Button = styled.button`
/* your css style here */
` class Counter extends Component {
state = { count: 0 } increment = () => this.setState({ count: this.state.count + 1 })
decrement = () => this.setState({ count: this.state.count - 1 })render() {
return (
<CounterContainer>
<Paragraph>{this.state.count}</Paragraph>
<Button onClick={this.increment}>+</Button>
<Button onClick={this.decrement}>-</Button>
</CounterContainer>
)
}
}export default Counter;
Using props to customize components
Styled-components makes use of props over classes when it comes to customizing the behaviour of a component, this makes styled-component flexible.
Let’s introduce this props property into our first styled-component above (i.e Button )
import React,{Component} from 'react'
import styled from 'styled-components';const Input = styled.input `
width: ${props => props.width};
height: ${props => props.height || 120px;};
border-radius: 5px;
border: 1px solid #cecece;
box-sizing: border-box;`
const Button = styled.button `
width: ${props => props.width};
border: none;
color: ${props => props.btnColor};
outline: none;
cursor:pointer;
border-radius: 5px;
padding: 10px 15px;
`
class Form extends Component {
render(){
return (
<div>
<Input type="text" width="250px"/>
<Button width="200px" btnColor="green">Submit</Button>
</div>
)
}
}export default Form;
So base on the value of props our input and button can have different style. so our button now have customize color.
Conclusion
That’s it for styled-components, it is just like your regular CSS you already know and loved, no need for learning another programming language just like i thought then. There are lots of other properties in styled-components which is not treated in this article such as Extending an existing styled component, Animation etc. for deep learning about styled-component checkout their offical website. The fact that i could keep record of my styles and nothing conflict gives me the great peace of mind i have ever wanted.
