How to select id in material-ui styles/JSS?

Question

I am writing a React application and using @material-ui/styles, which is based on JSS. I am styling using the higher-order component API. How do I specify an element through its id in my styles? I have searched in both Material UI and JSS docs but could not find any information on it. Something like:

const styles = (theme) => {
  className:{
    propertyName:"something something"
  },
  #elementId:{
    propertyName:"something something"
  }
}

Disinclined

Answer 1

One way you could add css to the element Id is by wrapping it with a parent div(or any other element) and providing CSS to the parent and nesting the child's CSS

const styles = (theme) => {
  parentDiv:{
      "& #childId": {
          propertyName: "something something"
      }
  },
}

// Inside the render method

<div className={styles.parentDiv}>
    <div id="childId" />
</div>

Ragg

Thank you! Is this the only way though? – Disinclined

If you're going to use withStyles HOC then according to the docs "it simply merges the class names provided with the style sheet". Therefore, I am assuming it will only add class names and not css for element ID – Ragg

I see, thank you very much! Abit annoyed that there is no direct way to select id but I'll work with your provided solution. – Disinclined