Reactjs 扩展样式化组件属性？

H1.js

export default styled.h1`
  margin: 0px;
  color: white;
`;

我想更改此组件的颜色，我尝试了

import H1 from "./H1";

const ColoredH1 = styled(H1)`
    color: "black"
`; 

但是这并没有改变H1的颜色？

不要使用带引号的“黑色”，记住您在

样式化组件中编写CSS，因此“黑色”不是有效的颜色，尽管
黑色是有效的

const ColoredH1 = styled(H1)`
  /* color: "black"; */  /* Invalid Color */

  color: black;          /* Valid Color */
  color: ${"black"}      /* Or use a valid color representation as String */
`;

将
颜色：黑色
替换为
颜色：“黑色”

谢谢你的理解

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>
);

const-Button=styled.Button`
颜色：红色；
字号：1em；
边缘：1米；
填充物：0.25em 1米；
边框：2倍纯红；
边界半径：3px；
`;
const CoralButton=已设置样式（按钮）`
颜色：珊瑚；
边框颜色：珊瑚；
`;
渲染(
普通按钮
番茄纽扣
);
styled.h1``color:“black”``的工作原理是你没有预料到的，正如所说的“black”不是有效的颜色，因此它没有覆盖默认值，即
black
，请尝试“yellow”并查看差异Yeah，我看到了。谢谢
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>
);