Menu
I have the following styled-component, and I am trying to add a unicode character \00d7 as the content for a pseudo selector, which is a cross or close icon.
However this doesn't seem to work as it would in css. Of course I can use an svg for this close icon as an alternative, I was just curious if this is possible with styled-components? It seems to allow blank pseudo selector's though e.g. ''
const Close = styled.span`
color: pink;
&:before {
content: '\00d7';
}
`
445
Creating Global StylesNormally, styled-components are scoped to a particular class or component but the createGlobalStyles function removes that limitation and allows whatever style you declare within it to be applied globally across your app.
styled-components creates a React component, which renders an HTML tag corresponding to the property in the styled object. Button will create and render a button HTML tag, while Div will create and render a div tag. They are components, so we can pass props to them.
I think you need a combination of the two comments:
content: "\\d7"
This works for me.
103
Try updating the reference to:
content: '×';
Further alternative encoding formats are available on https://brajeshwar.github.io/entities/.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
