Question

我正在尝试创建与材料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>

Answer 1

好吧，正如我所怀疑的那样，当尝试将其与CDN一起使用时，尤其是通过JSFiddle或通过堆栈片段，Material UI似乎存在问题。我认为导入/要求不正确。我一直在尝试通过CDN使用Material UI对material-ui questions进行多个回答，并且总是会出错。

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

材质用户界面：自定义标签样式无效

1 个答案: