Inject JSS in React without editing the component to be styled

Question

How do you convert CSS to JSS without modifying the component to be styled?

I am using emoji-mart picker for my React project and for it to be usable, there's a css file I need to import. However, we have a parser that cannot support imported css files and I think converting it to JSS is the answer, but I cannot get it to work so far.

I have tried converting it to a styles object and injecting it using withStyles and injectStyles, without much luck.

        <div className="emoji-mart-bar">

The component I am trying to style looks like the one above and I think the reason why withStyles and injectStyles won't work is because it does not use className={classes.[className]} but I could be wrong. Thanks in advance!

if you control that code, then you can trivially add some more classes to that className and just use normal site-wide CSS, scoped to only kick in for your element tree as you'd do with plain HTML+CSS? — Mike 'Pomax' Kamermans
Hello Mike, I cannot edit the component I am trying to style, since it is an import from an installed package. The classnames are explicitly coded into the JSX (as above), and I cannot import .css (e.g. import tabTheme from './MyTabTheme.css') although it works because it is not supported by the doc generating scripts that we are using. — mvalimento
No, but you use that code in your own code, so you can make sure you have normal CSS that pinpoints your own parent element(s) that contain these componenes, and then simply have CSS that applies based on the DOM path of the content you need styled. — Mike 'Pomax' Kamermans

mvalimento mvalimento · Accepted Answer · 2019-08-22T14:22:44

solution we went with is to introduce a new class and select its children like the following:

const styles = {
container: {
  '& .emoji-mart-bar': {
    backgroundColor: "white !important"
  },
  ...
},
}

<div className={classes.container}>
  <Picker /> //Emoji mart picker
</div>

Inject JSS in React without editing the component to be styled

1 Answers