我有我要应用于渲染的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，这使我认为可能有一种更优雅的方法来实现。
在那儿？我很想知道是否有更好的方法来完成此任务。
如果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>
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句