使用样式参数的组件与功能组件
使用样式参数的组件与功能组件
提问于 2021-01-07 12:03:47
我只是问自己为什么要使用样式化的组件而不是保存一些LOC，而不是使用自定义功能组件。示例代码：
const StyledButton = (props) => (
<button
style={{
color: '#E8E8E8',
padding: '8px 16px',
}}
{...props}
/>
);
const jsx = () => <div><StyledButton>Click Me!</StyledButton></div>;const StyledButton = styled.button`
color: '#E8E8E8';
padding: '8px 16px';
`;
const jsx = () => <div><StyledButton>Click Me!</StyledButton></div>;你好，托马斯
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-07 12:24:41
使用样式化的组件，您可以充分利用css的全部功能，这意味着您可以：
- 覆盖子标记和类的css
- 使用伪类，如
:visited、:first等。 - 使用
hover和其他ui状态 - 轻松使用css变量
就像几个例子一样，但是很明显，css在默认情况下可以做的其他任何事情都需要额外的javascript来处理普通的样式。
此外，您还可以阅读更多关于背后的动机-组件在这里的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65612074
复制相关文章
相似问题
腾讯云开发者
