Получить расширенные стили

Question

Мой код:

styled(Button)`
  color: ${(props: any) => COLOR_I_CHOOSE}
`

Я следил за разделом "Расширяющиеся стили" в документации - https://www.styled -components.com / docs / basics # extending-styles

Button - это пользовательский стиль компонента.Я хочу передать цвет, чтобы он переопределял внутреннюю настройку цвета на COLOR_I_CHOOSE.У меня есть контроль над внутренностями.Во внутренних органах я пытаюсь определить, были ли предоставлены какие-либо стилизированные переопределения, и использовать это.

Внутренне я установил CSS следующим образом:

const primaryChildre

nCSS = css`
  color: ${(props: any) => {
    console.log('props:', props);
    // TODO: test if props has override on color and use that
    // PSEUDOCODE: if (props.styleExtensions.color) return props.styleExtensions.color
    return props.inverse
      ? props.theme.ns().colors.brand
      : props.theme.ns().colors.white;
  }};
`;

Я вышел из системы props здесь, но не могу понять, как это получить.Я хочу сделать в качестве комментария псевдокода в приведенном выше.

Answer 1

<Button> Hello</Button> // default color

Следующее будет переопределять цвет по умолчанию Button, если переданный цвет не красный.

const MyRedTextButton = styled(Button)`
  color:  ${(props: any) => props.color === 'red' ? 'inherit' : props.color}
`

Тогда:

<MyRedTextButton color="red"> Hello </MyRedTextButton> // color of 'Hello' = the color of <Button/>

<MyRedTextButton color="blue"> Hello </MyRedTextButton> // color of 'Hello' = blue

Решает ли это вашу проблему