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. 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:
:visited
, :first
etc.hover
and other ui statesJust 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.
Also you can read more about the motivation behind styled-components here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.