Styled Components
In this page:
Writing CSS Directly in JavaScript
styled-components lets you define a component's styling using a tagged template literal of real CSS syntax, attached directly to a styled.tagname call. The result, like StyledButton, is a genuine React component you render just like any other.
Note: Name styled components with a clear prefix or suffix, like StyledButton, to distinguish them at a glance from plain components.
Warning: It's an npm package — the special styled.div`` syntax needs the library's Babel/runtime processing and won't work standalone in this CDN-only sandbox.
Example: Writing CSS Directly in JavaScript
// Run in your local React project (npm install required)
import styled from 'styled-components';
const StyledButton = styled.button`
background: blue;
color: white;
padding: 8px 16px;
`;
function App() {
return <StyledButton>Click me</StyledButton>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Using Props for Dynamic Styling
Inside the template literal, you can embed a function that receives the component's props and returns a CSS value, letting the same styled component render differently based on what props it's given, without writing separate CSS classes.
Note: Keep the prop-based logic simple inside the template literal — for complex conditional styling, consider computing a value beforehand and passing just that.
Warning: A prop like primary passed to a styled component also gets forwarded to the underlying DOM element by default in older versions, which can cause React 'unknown prop' warnings — check your styled-components version's behavior.
Example: Using Props for Dynamic Styling
// Run in your local React project (npm install required)
import styled from 'styled-components';
const StyledButton = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
color: white;
`;
function App() {
return <StyledButton primary>Primary Button</StyledButton>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Nesting and Pseudo-Selectors
Unlike inline styles, styled-components' template literals support the FULL power of real CSS, including nested selectors and pseudo-classes like &:hover, using the '&' symbol to refer back to the component itself.
Note: This nesting support is one of styled-components' biggest advantages over plain inline React styles, which can't express hover/focus states at all.
Warning: The '&' must refer to the component's own root element — nesting other unrelated selectors deeply can make styles harder to trace back to their component.
Example: Nesting and Pseudo-Selectors
// Run in your local React project (npm install required)
import styled from 'styled-components';
const StyledButton = styled.button`
background: blue;
&:hover {
background: darkblue;
}
`;
function App() {
return <StyledButton>Hover me</StyledButton>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Defining a styled component inside another component's render function, recreating it (and losing any internal state) on every render.
- Forgetting that styled.div``... creates an actual React component, usable just like any other, with its own props.
- Not realizing template-literal CSS supports full nesting and pseudo-selectors (like &:hover), not just flat properties.
- styled-components lets you write actual CSS inside JavaScript template literals, attached to a specific component.
- styled.div
...(or styled.button, styled.p, etc.) returns a new React component with those styles baked in. - Props can be used inside the template literal to make styles conditional/dynamic.
- Styled components must be defined at module scope, not recreated inside another component's render.
Requires npm install styled-components — not available via CDN in this sandbox; works with React 16.8+.
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: