Setup styled-components in create-react-app project
3 May 2022 (Updated 3 May 2022)
On this page
Install packages
npm i styled-components
npm i -D @types/styled-components
Create styled component
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use Title and Wrapper like any other React component – except they're styled!
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);
Tagged:
React tooling
Thanks for your comment 🙏. Once it's approved, it will appear here.
Leave a comment