[英]Styled-Components vs functional component using the style parameter
I just asked myself what the reason would be to use styled-components over a custom functional component in react other than saving a few LOC.我只是问自己,除了节省一些 LOC 之外,在响应中使用样式组件而不是自定义功能组件的原因是什么。 Example code:
示例代码:
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>;
Kind regards, Thomas亲切的问候,托马斯
With styled-components you can leverage the full power of css, which means you can:借助 styled-components,您可以利用 css 的全部功能,这意味着您可以:
:visited
, :first
etc.:visited
、 :first
等。hover
and other ui stateshover
等ui状态Just as a few examples, but obviously anything else that css can do by default that would require extra javascript to do with just plain styles.仅举几个例子,但显然 css 默认可以做的任何其他事情都需要额外的 javascript 来处理普通的 styles。
Also you can read more about the motivation behind styled-components here .你也可以在这里阅读更多关于 styled-components 背后的动机。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.