材质 UI：自定义选项卡样式不起作用答案

【问题标题】：Material UI : Customized Tabs styles are not working材质 UI：自定义选项卡样式不起作用
【发布时间】：2018-12-18 10:10:34
【问题描述】：

我正在尝试创建与材料 UI 文档中所述相同的自定义选项卡。 https://material-ui.com/demos/tabs/ Customized Tabs 我正在尝试使用材料 Ui 和 React JS CDN 并写入单个 HTML 文件来实现此功能。以下是 CDN：

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>

我已更改 tabsRoot 的标准样式。但是，样式不会在选项卡上更新。

以下是我正在使用但目前无法正常工作的代码。 CDN 可能有错误。我无法解决

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>My page</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
  </head>
  
  <body>
    <div id="root"></div>
    <script type="text/babel">
	
const {
  AppBar,
  Button,
  colors,
  createMuiTheme,
  CssBaseline,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Icon,
  MuiThemeProvider,
  Typography,
  withStyles,
  Paper,
  Tabs,
  Tab,
  Slide,
  SwipeableViews,
  PropTypes
} = window['material-ui'];

function TabContainer(props) {
  return (
    <Typography  component="div" style={{ padding: 8 * 3 }}>
      {props.children}  
    </Typography>
  );
};

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
tabsRoot: {
    borderBottom: '0px solid #e8e8e8',
  },
});
 
 class ARDASHBOARD extends React.Component<{}>{
	  state = {
    value: 0,
  };

  handleChange = (event, value) => {
    this.setState({ 
	 value
	});
  };

	render() 
	{
    const { classes } = this.props;
    const { value } = this.state;	
	const maxSteps = 4;
	const activeStep = 1 ;
	return (
	 <div>
	    <Paper >
        <Tabs
          value={value}
          onChange={this.handleChange}
		  indicatorColor="secondary"
          textColor="primary"
		  fullWidth
		  scrollable
        >
          <Tab   label={
			<div>
				<Typography variant="caption">
					DSO
				</Typography>
				<Typography variant="title">
					28
				</Typography>
			</div>
			} />
          <Tab  label={
      <div>
        <Typography variant="caption">
          CEI
        </Typography>
        <Typography variant="title">
          29
        </Typography>
      </div>
   } />
		  <Tab  label={
      <div>
        <Typography variant="caption" >
          ADP
        </Typography>
        <Typography variant="title">
          31
        </Typography>
      </div>
   } />
		  <Tab 
		  label={
      <div>
        <Typography variant="caption">
          ADL
        </Typography>
        <Typography variant="title">
          38
        </Typography>
      </div>
   } />
        </Tabs>
      </Paper> 
	 </div> ); 
	}};
		
 var ARDASHBOARD1 = withStyles(styles)(ARDASHBOARD);
ReactDOM.render(<ARDASHBOARD1 />, document.getElementById('root'));
document.getElementById("div2").innerHTML = "test result";
    </script>
  </body>
</html>

【问题讨论】：

能否粘贴您正在尝试的代码？
嗨，我已经编辑了所需信息的帖子

标签： material-ui

【解决方案1】：

好吧，正如我所怀疑的那样，在尝试将 Material UI 与 CDN 一起使用时似乎存在问题，尤其是通过 JSFiddle 或 Stack Snippets。我认为导入/要求不正确。我一直在尝试通过 CDN 使用 Material UI 来获得material-ui questions 的多个答案，但总是出错。

最好的办法是在本地创建一个安装了 material-ui 的小型 React 项目。

【讨论】：