Styled Component is a library built for React and React Native.
It allows to use component level styles in application.Styled Components are built on tagged template literals, which means, the CSS code is written in between backticks.
Installation
- with npm
npm install styled-components
- with yarn
yarn add styled-components
Import before using
import styled from styled-components;
Basic Styled Components
Create Button Component with the help of styled-components and can be reuse anywhere without worrying about its CSS.
- Button.jsx
import styled from "styled-components";
const StyledButton = styled.button`
border: 2px solid #4caf50;
background-color: #4caf50;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
transition: 0.5s all ease-out;
`;
export default StyledButton;
- App.jsx
function App() {
return (
<div className="App">
<StyledButton>Styled Button</StyledButton>
</div>
);
}
Styled Components with Props
Pass a function to a styled components template literal to adapt it based on its props.
- Button.jsx
import styled from "styled-components";
const StyledButton = styled.button`
border: 2px solid #4caf50;
background-color: #4caf50;
color: white;
background-color: ${(props) =>
props.variant === "outline" ? "#fff" : "#4caf50"};
color: ${(props) => (props.variant === "outline" ? "#4caf50" : "#fff")};
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
transition: 0.5s all ease-out;
`;
export default StyledButton;
- App.jsx
function App() {
return (
<div className="App">
<StyledButton>Styled Button</StyledButton>
<div>
<br />
</div>
<StyledButton variant="outline">Styled Button</StyledButton>
</div>
);
}
Extending Styles
To easily make a new component that inherits the styling of another, just wrap it in the
styled()constructor.
- Button.js
import styled from "styled-components";
export const StyledButton = styled.button`
border: 2px solid #4caf50;
background-color: ${(props) =>
props.variant === "outline" ? "#fff" : "#4caf50"};
color: ${(props) => (props.variant === "outline" ? "#4caf50" : "#fff")};
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
transition: 0.5s all ease-out;
`;
export const FancyButton = styled(StyledButton)`
background-image: linear-gradient(to right, #f6d365 0%, #fda085 100%);
border: none;
`;
- App.jsx
function App() {
return (
<div className="App">
<StyledButton>Styled Button</StyledButton>
<div>
<br />
</div>
<StyledButton variant="outline">Styled Button</StyledButton>
<div>
<br />
</div>
<FancyButton as="a">Fancy Button</FancyButton>
{/* as - is a polymorphic prop => pass anchor tag */}
</div>
);
}
Conclusion
- Styled Components are a CSS-in-JS tool that bridges the gap between components and styling, offering numerous features to running in a functional and reusable way.
- Documentation: https://styled-components.com/docs
Top comments (0)