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

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