material-UI如何修改组件样式？

Question

materialUI是封装起来的组件，如何下手改呢？

例如，把这个……

改成这样……

import React from 'react';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import Slider from 'material-ui/lib/slider';

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
};

function handleActive(tab) {
  alert(`A tab with this route property ${tab.props.route} was activated.`);
}

const TabsExampleSimple = () => (
  <Tabs>
    <Tab label="Item One" >
      <div>
        <h2 style={styles.headline}>Tab One</h2>
        <p>
          This is an example tab.
        </p>
        <p>
          You can put any sort of HTML or react component in here. It even keeps the component state!
        </p>
        <Slider name="slider0" defaultValue={0.5} />
      </div>
    </Tab>
    <Tab label="Item Two" >
      <div>
        <h2 style={styles.headline}>Tab Two</h2>
        <p>
          This is another example tab.
        </p>
      </div>
    </Tab>
    <Tab
      label="onActive"
      route="/home"
      onActive={handleActive}
    >
      <div>
        <h2 style={styles.headline}>Tab Three</h2>
        <p>
          This is a third example tab.
        </p>
      </div>
    </Tab>
  </Tabs>
);

export default TabsExampleSimple;

看着这些代码，一筹莫展……

请告知思路，谢谢~

Answer 1

组件是封装（屏蔽）了一些东西，开放（扩展）了一些东西，如果这个不是组件提供的可选样式，那么你是不好改的。你可以改的是颜色之类的。

所以你的需求，要不找找是否有其他更适合的组件，例如list, menu等；要不自己去创建新的组件

Answer 2

今天无聊随手答一波：

Material UI 的所有样式均采用了 CSS in JS 来做，这意味着所有的样式都是 inline（内联）的，有着非常高的优先级。好在，Material UI 中大部分组件都暴露了 style 甚至 childComponentStyle 这样的“接口”（即 props）供你使用，具体可以参见官方文档。

另外，对于少数 Material UI 没有做好接口又非要 override 的情况，可以强行用选择器 + !important 侵入，但是非常不推荐：

.someClass h1{
    color: red !important;
}

Answer 3

https://github.com/cssinjs/js...
https://material-ui-next.com/...