React Styled Components Example Tutorial

React Styled Components Example Tutorial is the topic, we discuss today. The styled componentsremove the mapping between components and styles. This means that when you’re defining your styles, you’re creating a standard React component. It is the new way to attach the styles to the components. Styled-Components is a new CSS tool, designed by Max Stoiber and Glen Maddern, which helps you organize CSS in your React project. It also works well with React Native. The traditional styling of websites depends heavily on an external stylesheet with CSS. It has been challenged advent of React and component-based UI design. So the styled components will be the one possible solution.

Advantages of using Styled Components

1. Getting rid of the mapping between styles and components.
2. Building small and reusable components.
3. Reducing the risk of specificity clash.

React Styled Components Example

The styled-components utilizes tagged template literals to style your components. Okay, first we install the React js, and then we explore the React styled-components.

Step 1: Install React.

Type the following command.

npx create-react-app styledcom

Go to the project folder styledcom.

cd styledcom

Open the project in your IDE or Editor. If you are using VSCode, then you can hit this command.

code .

Step 2: Install the styled components library.

I am using Yarn as a package manager. So let us pull the package by the following command.

yarn add styled-components

or

npm install styled-components --save

Next step is to open the src  >>  App.js file and modify the file.

// App.js

import React, { Component } from 'react';
import styled from 'styled-components'

const Blog = styled.h1`
  text-align: center;
  color: skyBlue;
`;

class App extends Component {
  render() {
    return (
      <Blog>Kansiris</Blog>
    );
  }
}

export default App;

Save the file and start the development server by the following command.

npm start

It will open the browser at this URL: http://localhost:3000/.

You can see that we did not create the component traditionally, but still, it has been created and assign the styles as well.

We can create this Blog component traditionally this way.

// App.js

import React, { Component } from 'react';
import styled from 'styled-components'

const Blog = (props) => {
  return <h1 
          style={{ textAlign: 'center',color: 'skyBlue' }}>
          {props.title}
        </h1>
}

class App extends Component {
  render() {
    return (
      <Blog title="Kansiris" />
    );
  }
}

export default App;

Now, save and see. We will get the same output. But the styled-components looks clear in code.

We are creating the component and assign the styles on the fly. It is so cool.

Style Third party components with styled-components.

If we are importing some third party components then also, we can style with styled-components. Sometimes, we have essential third-party components like Button or Card.  We can override that design as well.

Let us say, In above example, we need to style the App.js component. Then, we will do the following code.

// App.js

import React, { Component } from 'react';
import styled from 'styled-components'

const Blog = styled.h1`
  text-align: center;
  color: skyBlue;
`;

class App extends Component {
  render() {
    return (
      <div className={this.props.className}>
        <Blog>kansiris</Blog>
      </div>
    );
  }
}

export default styled(App)`
  background-color: #232020;
  border-radius: 5px;
`;

Now, we can see the styles applied to an App.js component.

Global Styles in styled-components

In the web development, we sometimes need the Global styles that apply to our whole web application including all of the web pages. So let us do that.

In our example, we need to inject our global styles inside src  >>  index.js file.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { injectGlobal } from 'styled-components';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

injectGlobal`
  body {
    background-color: #eddb53;
    padding: 0;
    margin: 0;
    font-family: cursive;
  }
`

registerServiceWorker();

Adapting styles based on props

Based on the component properties, it will adjust its styles. It is the if-else condition for the CSS styles. Dynamic based on the Data.

// App.js

import React, { Component } from 'react';
import styled from 'styled-components'

const Blog = styled.h1`
  text-align: center;
  color: skyBlue;
`;

const Button = styled.button`
  background: ${props => props.primary ? 'green' : 'white'};
  color: ${props => props.primary ? 'white' : 'green'};
  font-size: 1.5em;
  padding: 0.25em 1em;
  border: 2px solid green;
  border-radius: 5px;
  margin: 10px 10px 10px 10px
`;

class App extends Component {
  render() {
    return (
      <div className={this.props.className}>
        <Blog>Kansiris</Blog>
        <Button primary="styled">Styled</Button>
        <Button>Plain</Button>
      </div>
    );
  }
}

export default styled(App)`
  background-color: #232020;
  border-radius: 5px;
`;

In above example, based on the primary props, we have created two different styled buttons.

You can find more on their original documentation.

That is it for the React Styled Components Example. Thanks for taking.