React + Styled Components - разделение и повторное использование css "связок"

Question

У меня есть этот код, который я применяю к визуализированному компоненту реакции.

const AdBannerBaseStyle = `
   display: block;
   text-align: center;
   font-size: 2em;`;

 const AdBannerStyle = styled.div`
     ${ AdBannerBaseStyle }      
 `;

 const AdBannerStyleDev = styled.div`
   ${ AdBannerBaseStyle }
   background: yellow;
 `;

Приведенный выше код работает как задумано, но WebStorm жалуется на явный background: yellow, который заставляет меня думать, что может быть более элегантный способ достижения этого.

Есть? Я был бы признателен, если бы знал, есть ли лучший способ, шаблон, чтобы сделать это.

Answer 1

Если жалуется на Webstorm, это может быть связано с тем, что вы жестко кодируете названный цвет, а не используете его значение цвета HEX или RGB.Однако, если ваш вопрос больше ориентирован на Есть ли лучший способ или шаблон для повторного использования CSS с использованием стилизованных компонентов? , тогда я бы сказал, да.Вы смотрели на расширение стилей?Здесь TomatoButton основан на стилях из Button.

// The Button from the last section without the interpolations
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;
// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;
render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

Из документов Styled Components Docs .