reactjs - 更改 react Material -ui 中的事件选项卡背景颜色

Question

想要从 material-ui 选项卡更改事件选项卡上的背景颜色:

http://www.material-ui.com/#/components/tabs

已经如何更改下划线:

inkBarStyle={{背景:'红色'}}

但是背景颜色变了

非常感谢你

Answer 1

与其更新选项卡的一个实例，不如总体上更新主题。这样您就不必为该特定组件的每个单独使用添加样式。

通常，您会有一个主题文件，例如:

./themes/default/index.ts

import { createMuiTheme } from '@material-ui/core/styles';
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';

const overrides = {
  MuiTab: {
    // general overrides for your material tab component here
    root: {
      backgroundColor: 'red',
      '&$selected': {
        backgroundColor: 'blue',
      }
    },
  },
};

const theme = createMuiTheme( {
  overrides,
  breakpoints,
  palette,
  typography,
  shape,
});

然后在您的应用程序中，您可以将其用作:

./src/index.ts

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { App } from './components';

ReactDOM.render(
  <MuiThemeProvider theme={themeSpec.theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root') as HTMLElement
);

资料来源: https://material-ui.com/customization/components/#global-theme-override

默认值可以在这里找到: https://material-ui.com/customization/default-theme/

可以在此处找到组件的覆盖: https://github.com/mui-org/material-ui/blob/2726ab46b2b1789bdd0a9aa1a2ff249a443ab1a8/packages/material-ui/src/styles/overrides.d.ts#L91-L173

有关 Material 主题的更多信息: https://material-ui.com/customization/themes/#themes

注意: typescript 中的示例要更彻底一些，但 Vanilla javascript 也是如此