代码之家 › 专栏 › 技术社区 › JasonGenX

React+样式化组件-分离并重新使用css“bundles”

styled-components reactjs

JasonGenX · 技术社区 · 7 年前

我有这段代码,我正在应用于一个呈现的react组件。

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

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

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

上面的代码按预期工作,但是webtorm抱怨 background: yellow 这使我认为可能有一种更优雅的方式来实现这一点。

有?如果有更好的方法和模式来完成这件事,我将不胜感激。

1 回复 | 直到 7 年前

sgarcia.dev 7 年前

有没有更好的方法或模式来使用样式化组件重用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 .