Hello guys, I’m Clark! Today I am not really going to share a power skill in this post, but I am going to talk the process about I learning styled components. I hope you can learn something from my share or every beginner can learn what is styled components and how to use it?

What is styled components?

From we can knew the official document:

styled-components is the result of wondering how we could enhance CSS for styling React component systems.

So I think that is useful and helpful, if we apply styled components in our react project(But I have no a real answer, maybe we can find it together or you can comment your opinion below, anything thanks!).

Create a React project

In this series, I will use create-react-app create a React project. So whether you had installed create-react-app, as long as you installed node and npm(If you didn’t, you can reference this post).

you can run command below, if you prepared:

npx create-react-app practice-styled-components

When you finished it, we would have a best environment to practice styled components.

Install styled-components

Next, we should install styled components if we want to use it. So type following:

npm install --save styled-components

Make a first styled component

First, we would delete the src/App.css file because we don’t need CSS file now, and remove the code of App component from src/App.js. Besides I also refactor the way of defined function component:

// Ignore others code...
import App.css; // <== Please remove this line.

const App = () => (
  <div></div>
);

Next in the same file, I defined a simple styled component and don’t forget import your library styled-components, like this:

// Ignore others code...

import styled from 'styled-components';

const Title = styled.div`
  font-size: 32px;
  color: #0f4c75;
`;

The styled.div would create a component which only have a div tag, in this div everything will use style you written. So I think the code above is like:

const Title = (props) => (
  <div style={{ fontSize: 32, color: '#0f4c75' }}>
    {props.children}
  </div>
)

So we can use Title like components:

// Ignore others code...

const App = () => (
  <Title>
    Hello world!
  </Title>
);

The result of code above:

The gist.

Receive Props

We already knew the styled component is a component, so it can receive props is very normal. Let’s learn it below!

In the styled component. Styled components can receive props through a parameter of function, the function will return a string, the string is a result you want to set in the style. Like following:

const Title = styled.div`
  font-size: 32px;
  color: ${props => props.color ? props.color : '#0f4c75'};
`;

So we can set any color in the styled component:

const App = () => (
  <>
    <Title>Hello world!</Title>
    <Title color="#fdcb9e">Hello world!</Title>
  </>
);

The result:

The gist.

Conclusion

In this post we learned what is styled components, install it, how to use it and receive props in styled components. I had provided gist for each example, the gist have complete code, if you have any question or opinion please comment below let me know, I would thank for any comment!

Thanks

Photo by Tim Mossholder on Unsplash