React MUI framework using basic css not working

Question

I am trying to use basic CSS with MUI components.

Their website says that it should be possible.

https://material-ui.com/guides/interoperability/#plain-css

When trying to use it I can not get it to work.

  *.birthday-root {                                                                                                                                                                                 
    color: blue;
    align-items: 'center';                                                                                                                                                                                
    width: "25%";                                                                                                                                                                                         
  }                                                                                                                                                                                                       
  .MuiTableCell-root.MuiTableCell-body.birthday-smallCell.MuiTableCell-sizeSmall.birthday-aniverssaryYear {
    font-weight: "bold"                                                                                                                                                                                   
  }                                                                                                                                                                                                       
  .birthday-month {                                                                                                                                                                                       
    border-bottom: "none";                                                                                                                                                                                
    font-weight: "bold";                                                                                                                                                                                  
  }                                                                                                                                                                                                       
  .birthday-smallCell {                                                                                                                                                                                   
    width: "15%";                                                                                                                                                                                         
  }

As you can I have tried different approaches. First using * on all objects.

Then I tried to copy the MUI classes from the webpage source.

Nothing seems to work. I can use all of the CSS still on basic elements like div, but not on MUI components.

I can't use makeStyles, because my whole head is cluttered with styles: https://github.com/mui-org/material-ui/issues/16756

I also don't want to dwelve into styled-components, because thats another learning curve.

Taavi Ansper Taavi Ansper · Accepted Answer · 2021-04-28T11:44:13

Ok after digging in the developer tools styles I found that I had " " on all of my values" which is invalid in normal css. It happened, because I converted from makeStyles to css.

React MUI framework using basic css not working

1 Answers