The original post published on my blog: https://ms314006.github.io/start-learn-styled-components-what-is-it-and-how-to-install/
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>
);
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>
</>
);
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!
Top comments (2)
wow, I'm going to use this package I didn't know it's power before.
Yes! I will continue sharing about styled component! We can learning together!