Using styled-components

Ionic Framework
1

We use styled-components for our application and I was wondering if anyone has used this to style up any parts of Ionic.

We allow customers to alter the theme of our application using the theme features of styled-compoents as well, the theme itself is pulled from the network and applied to the components.

Basically what I’m trying to do is something like this:

const StyledToolbar = styled(IonToolbar)`
  --background: ${props => theme.toolbarColor};
`

Theming docs for styled-components: https://www.styled-components.com/docs/advanced#theming
Docs for Toolbar: https://ionicframework.com/docs/api/toolbar

Currently my toolbar appears white for some reason. I’d like to be able to customize that background color at runtime by providing an override. Styled-Components basically makes a separate styles tag in the document and gives the component a new classname.

Has anyone had any luck with this?

2 Likes
2

Were you able to solve this?

3

I believe it was fixed in a release quite soon after I reported this. I also just recently added styled-components to the react starter and had zero issues overriding styles and things.