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"
  }
}

user_4644332 · Answer

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

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

1 Answers