Using styled-components

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:
Docs for 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?

1 Like

Were you able to solve this?

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.