我們如何樣式化ReactJS中material-ui創建的DOM？

Question

我們如何樣式化由Material-UI創建的DOM？

我正在使用GridListTileBar，它們的title屬性生成這樣的DOM。

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

問題是，您無法使用上面的類名稱進行樣式設置，因為它將更改。 最重要的是，我無法在代碼中添加新的靜態類名稱，因為它尚不存在。

我想我可以遍歷DOM，然后使用jQuery添加一個類名，但是我認為這不是一個優雅的解決方案。 任何想法？

Answer 1

Title具有node類型，因此您可以傳遞任何樣式的元素，如下所示：

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

Answer 2

查看GridListTileBar的源GridListTileBar ，您提供給組件的所有props都會傳遞到根div 。

您應該能夠傳遞className並看到它已被應用

<GridListTileBar className='my-class' />