# Id selector in react css modules

Question

I'm using React Css modules for styling my react app.

I have some html elements with id attribute and I want to style them using the css id selector and not a class selector. Is that possible with react css modules? For example.

This is an example of css, I'm going to call it Button.modules.css

#specialButon {
 margin: 5px;
}

.notSpecialButton {
 margin: 5px;
}

And this is an example of react component

import style from './Button.module.css';

function Button() {

 render(
  <div>
   <button id="specialButon">Special<button>
   <button className={style.notSpecialButton}>Not Special<button>
  </div>
)

export default Button

Could you tell me, How can I use de id selector to apply style elements?

Thanks you.

Answer 1

It's a bit late, but the accepted answer is actually not a right one. You can definitely use id selectors with CSS Module!

In your case, just changing it to the below will do :)

<button id={style.specialButon}>Special<button>

or

<button id={style['specialButon']>Special<button>

Answer 2

For that, you can use global CSS in React which is generally in App.js. But is general to use className in module CSS.