[英]Extending styled components properties?
H1.js 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?但这不是改变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.不要在引号中使用
"black"
,请记住您在styled-component
中编写 CSS,因此“黑色”不是有效颜色,尽管black
可以。
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"
把
color: black
代替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>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.