Styled Components

To Share and +4 nLEARNs

import {WidgetEditor} from "@site/src/components/social-widget"

Styled Components is a popular library for styling React components using CSS-in-JS.
This tool was imported into infrastructure for your use. You do not have to install or import anything, it is ready to use right away.


const Button = styled.button`
/* Adapt the colors based on primary prop */
background: ${(props) => (props.primary ? “palevioletred” : “white”)};
color: ${(props) => (props.primary ? “white” : “palevioletred”)};

font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 10px;

return (


Generate comment with AI 2 nL
Scroll to Top
Report a bug👀