小编yur*_*uri的帖子

我正在尝试一些非常简单的事情：使用 Material-UI 主题为网站构建两个主题：

一个light主题和dark一个，但效果不佳：主题位于每个 Material-UI react 元素上，但 html 文档上的根元素保持相同的默认白色背景。

当然可以通过纯.css攻击body来改变：

body {
  background-color: #222;
}

但是我想用 React 动态改变它，我虽然这会起作用，但它不会：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@material-ui/styles';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const themeLight = createMuiTheme({
  palette: {
    background: {
      default: "#e4f0e2"
    }

    },
});

const themeDark = createMuiTheme({
    palette: {
      background: {
        default: "#222222",
      }

    },
});

ReactDOM.render(
     <MuiThemeProvider theme = { themeDark }> …

我有以下来自 Material-UI 的选项卡示例：

https://codesandbox.io/s/dark-rain-0ft9o

我试图覆盖这个<div class="MuiBox-root ...">类，它强加了一个padding: 24px.

但到目前为止我无法做到，因为那个 Box 组件没有在代码中声明：

 <TabPanel value={value} index={0}>
   Item One
 </TabPanel>

此框似乎位于 TabPanel 组件内，但我无法覆盖此框样式，因为它不存在：

我怎样才能覆盖它来强加padding-top: 0px？

非常感谢，