Styled Components and other ways to style React Project

Photo by Caspar Rubin on Unsplash

I generally use styled components, most of the new CSS which I do at work. One of the main benefit of styled components in any react project, can be truly understood when the projects that bigger.

The CSS in large Complex projects which uses a normal CSS or scss, gets complicated very soon. The new developers who come to the project, find it really difficult do a small CSS change also. Because that is small CSS change breaks a lot of things.

Beside this just styled component fits into the react ecosystem which creates component. We will soon see the power of props in the example which were going to create.

Now there are two other popular ways, to do CSS in a react project.

1. CSS Stylesheet

First is the usual CSS style sheet. We can use like below in a normal component. We have a normal functional component called SolidBox.

We then import a CSS file called SolidBox.css and use it like, we do in normal HTML, CSS setup.

But I generally use it in the root index.js file, of a react project like below.

And the index.css , the route colour HTML and body css like below.

2. Inline styling

The second way is the inline styling. But it is different than the normal HTML inline styling. One of the main thing to notice is that every key of the CSS property is written in camelCase. And also quotes are necessary to specify the value. So font-size become fontSize and 15px becomes ‘15px’.

And whatever HTML element we use them, have to specify with style equal to like style={ renderButtonDisabled }

I mainly use them for some small style fix, which only used in that component. Example of button like below.

....<input type="button" style={renderButton} onClick={ this.handleFormSubmit } value="Submit" />

There is another way to use them, and I use them for really small CSS change, like centring text as below.

3. Styled-components

The Third way is to use a library like styled-components, which is one type of CSS-in-JS library. But it is the most popular one , hand should be used for any modern react project. Especially the one which I started from scratch.

You have to do npm install to use it details of which are given in this link.

Let’s look at the below real example, which I have created for solving a coding challenge problem. In it PageWrapper, HeaderTitle, FlexResult, FlexBoxRev are all styled-components. We are defining them in a different file called StyledComponents.js. This file contains all the styled-components but we are importing only the components which we need.

class ResultPage extends Component {
render() {
return (
<PageWrapper wider>
<FlexResult>
<FlexBoxRev toCenter noRightMargin>

<HeaderTitle toWhite>Success! Congratulations on finding Falcone.</HeaderTitle>
<HeaderTitle small topMargin>Time Taken: {this.props.timeData}</HeaderTitle>
</FlexBoxRev>
</FlexResult>
</PageWrapper>

);
}

}
const mapStateToProps = ({ dataReducer }) => ({
findData: dataReducer.findData,
timeData: dataReducer.timeData
});

export default connect(mapStateToProps, null)(ResultPage);

The StyledComponents.js file which contains all our styled components.

One of the main thing to notice that we are using something called props. Because of props we can reuse the styled-components. Let’s take the example of PageWrapper. We can use it as <PageWrapper>…</PageWrapper> which will set the max-width to 85%.
And if like <PageWrapper wider>..</PageWrapper> , it will set max-width to 96%

The other thing to notice is that, we can use more than one props by <HeaderTitle small topMargin>Time Taken: {this.props.timeData}</HeaderTitle>

Hope you liked the article. You can find the complete project in my github repo link.
See you soon :)