Я пытаюсь создать настраиваемые вкладки, которые описаны в документации к пользовательскому интерфейсу.https://material -ui.com / demos / 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>