我们如何样式化ReactJS中material-ui创建的DOM？

Question

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?

Answer 1

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

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

Answer 2

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' />