H1.js
export default styled.h1`
margin: 0px;
color: white;
`;
I want to change the color of this component, and I tried
import H1 from "./H1";
const ColoredH1 = styled(H1)`
color: "black"
`;
But this is not changing the color of the H1?
Don't use "black"
with quotes , remember that you write CSS within the styled-component
, therefore "black" isn't a valid color, although black
do.
const ColoredH1 = styled(H1)`
/* color: "black"; */ /* Invalid Color */
color: black; /* Valid Color */
color: ${"black"} /* Or use a valid color representation as String */
`;
Put color: black
instead of color: "black"
import H1 from "./H1";
const ColoredH1 = styled(H1)`
color: black;
`;
For your understanding
const Button = styled.button`
color: red;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid red;
border-radius: 3px;
`;
const CoralButton = styled(Button)`
color: coral;
border-color: coral;
`;
render(
<div>
<Button>Normal Button</Button>
<CoralButton>Tomato Button</CoralButton>
</div>
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.