I have a simple button component with actions passed as props. I've decided to style it using Styled-Components .
In my React Application, I have three buttons with different actions and I would like them to have a different color.
Can I write some CSS classes inside StyledComponent and pass as a prop and 'indicator' which class should my component be styled?
Sure, this is one of the most basic features of styled components.
One way is to create different components:
const MyButton = styled.button`
font-size: 12px;
border: 1px solid red;
`;
const FooButton = styled(MyButton)`
color: red;
`;
const BooButton = styled(MyButton)`
color: blue;
`;
Another way is to use props:
const MyButton = styled.button`
font-size: 12px;
border: 1px solid red;
color: ${({type}) => type === 'foo' ? 'red' : 'blue'};
`;
...
...
<MyButton type={'foo'} />
And for your original question, you can do that. But in most cases it's less "styled-components"ish to use classNames that way.
You can style classes inside inside styled-components like this:
const Button = styled.button`
&.className {
// some styles
}
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.