React + 样式化组件 - 分离和重用 css "bundles"

Question

我有这段代码，我正在将其应用于呈现的 React 组件。

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 使用样式化的组件？，那么我会说是的。您是否研究过 extending 样式？这里 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.

React + 样式化组件 - 分离和重用 css "bundles"

React + Styled Components - separating and re-using css "bundles"

reactjs

styled-components