Ad

Styling An Element That Is Passed Into A Variable In React

- 1 answer

I'm not sure what this is called but I created a variable called test and I set that equal to an element.

var test = <Button className="testButton" />

Then in my return, I use my test variable like this:

render () {
var test = <Button className="testButton" />
  return{
    {test}
  }
}

I've tried to style the button by applying a className but that doesn't seem to be working. Any ideas on how I can accomplish this?

Ad

Answer

That button is coming from Material-UI or from what?

It does have connection with Materia-UI somehow. I'm almost sure that the Button gets the class testButton and has these styles connected with it. But Button in Material-UI gets styles from inline-styles thanks to MUI-Theme.

Acording to Material-UI website

All Material-UI components have their styles defined inline.

So basically if your class has styles that aren't !important - they will be simply ignored and the inline ones will be taken anyway. There are actually few solutions to that:

  • change mui-theme
  • override inline-styles
  • add to class styles !important if you want to override something
Ad
source: stackoverflow.com
Ad