用新的样式组件覆盖样式组件？

Question

我有三个样式组件 StyledBanner 和 StyledTitle 和 WarningBanner。

我希望通过WarningBanner 覆盖StyledBanner 颜色，但没有成功，返回组件总是回退到 div 颜色。

如何重新设置样式组件的样式？

const StyledBanner = styled.div`
  background-color: ${theme.colors.blue_2};
  padding: 15px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  width: 100%;
`;

const StyledTitle = styled(PG)`
  font-size: 1.125rem;
  font-weight: bold;
  padding: 0px 0px 15px 0px;
  colors: ${theme.colors.blue_2}

`

const WarningBanner = styled(StyledBanner)`
  background-color: ${theme.colors.banner_yellow}

  ${StyledTitle}{
    colors: ${theme.colors.textColor}
`
...

return (<WarningBanner> //still showing theme.colors.blue_2
      {title ? <StyledTitle> //still showing theme.colors.blue_2
        {title}
      </StyledTitle> : null}
      </WarningBanner>)

Answer 1

您发布的代码中有一个小错误（您要设置的 CSS 属性是 color，而不是复数）。否则，您的方法是完全有效的。

工作示例：https://codepen.io/mattlubner/pen/XWrvQLP

const theme = {
  colors: {
    red: '#f00',
    greed: '#0f0',
    blue: '#00f',
    yellow: '#ff0',
  },
};

const StyledBanner = window.styled.div`
  background-color: ${theme.colors.blue};
  padding: 15px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  width: 100%;
`;

const StyledTitle = window.styled.h1`
  font-size: 1.125rem;
  font-weight: bold;
  padding: 0px 0px 15px 0px;
  color: ${theme.colors.blue};
`;

const WarningBanner = window.styled(StyledBanner)`
  background-color: ${theme.colors.yellow};
  ${StyledTitle} {
    color: ${theme.colors.green};
`;

ReactDOM.render(
  <WarningBanner>
    <StyledTitle>Example Title</StyledTitle>
  </WarningBanner>,
  document.getElementById('root'),
);