CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
sflow
sflow

Reputation: 725

How do we style the DOM that is created by the material-ui in ReactJS?

How do we style the DOM that is created by the material-ui?

I am using GridListTileBar, and their title property generate a DOM like this.

<div class="MuiGridListTileBar-title-29" data-reactid=".0.3.0.$3/=1$3.0.1.$=11.0.0">test</div>

The thing is, you cannot style with the class name above because it will change. On top of that, I cannot add a new static class name in the code because it doesn't exist yet.

I guess I can traverse the DOM and then add a class name with jQuery, but I don't think this is the elegant solution. Any idea?

Upvotes: 1

Views: 455

Answers (2)

John Halbert
John Halbert

Reputation: 1350

Looking at the source for GridListTileBar, any props you provide to the component are passed to the root div.

https://github.com/mui-org/material-ui/blob/v1-beta/src/GridList/GridListTileBar.js

You should be able to pass className and see that it's applied

<GridListTileBar className='my-class' />

Upvotes: 0

oklas
oklas

Reputation: 8240

Title have a node type, so you can pass any styled element like this:

<GridListTileBar 
  title={
    <b
      style={{
        color:'red'
      }}
    >
      Test title
    </b>
  }
/>

Upvotes: 1

Related Questions