Переопределить стилевой компонент новым стилевым компонентом?

Question

У меня есть три стилевых компонента StyledBanner и StyledTitle и WarningBanner.

Я хочу перезаписать StyledBanner цвет через WarningBanner, но это не работает, и возвратКомпонент всегда возвращается к цвету 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'),
);