xxxxxxxxxx
// Using .attrs, we attach the .small class to every <Button />
const Button = styled.button.attrs(props => ({
className: "small",
}))`
background: black;
color: white;
cursor: pointer;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid black;
border-radius: 3px;
`;
render(
<div>
<Button>Styled Components</Button>
{/* Here we attach the class .big to this specific instance of the Button */}
<Button className="big">The new way to style components!</Button>
</div>
);
Styled ComponentsThe new way to style components!
xxxxxxxxxx
const PasswordInput = styled.input.attrs(props => ({
// Every <PasswordInput /> should be type="password"
type: "password"
}))``
// This specific one is hidden, so let's set aria-hidden
<PasswordInput aria-hidden="true" />