Material UI-makeStyles 我的风格不行
Material UI-makeStyles My style doesn't work
我遇到的问题是 Material-UI makeStyles 不起作用。
我想应用我的 css 样式,但不起作用。
我认为是Bootstrap或MaterialTable造成的。
虽然 Bootstrap4 像 'mt'、'mb' 一样工作,但 makeStyles 不工作。
这是Bootstrap造成的吗?另外,同时使用 bootsrap4 和 material-ui 时会发生这种情况吗?
这是我的 package.json.
{
"name": "react-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"material-table": "^1.69.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
如果你知道原因,请告诉我。
import { makeStyles } from '@material-ui/core';
const useStyles = () => makeStyles({
root: {
marginTop: '100px',
marginBottom: '100px',
backgroundColor: 'red',
}
});
export const Table = () => {
const classes = useStyles();
const [dataAll, setDataAll] = useState([]);
useEffect(() => {
CheckListService.getList().then((response) =>
setDataAll(response.data)
)
}, [])
const columns = [
{
title: 'リスト番号', field: 'listNo'
},
{
title: '採用日', field: 'saiyouDate'
},
{
title: 'バージョン', field: 'version'
},
{
title: '種別', field: 'shubetu'
},
{
title: 'ライセンス', field: 'licenseManage'
},
{
title: '用途', field: 'youto'
},
{
title: '備考', field: 'bikou'
},
{
title: '承認者', field: 'authorizer'
},
{
title: '承認日', field: 'approvalDate'
},
{
title: 'URL', field: 'url'
}
]
return (
<div>
<div className="container">
<div className={classes.root}>
<MaterialTable
title="使用許可ソフトウェアリスト"
data={dataAll}
columns={columns}
style={{
marginTop: '50px',
whiteSpace: 'nowrap',
}}
options={{
headerStyle: {
backgroundColor: '#75A9FF',
color: '#FFF'
}
}}
localization={localizationJapanese}
/>
</div>
</div>
<Box pt={4}>
<Copyright />
</Box>
</div>
)
}
只需更改这些行即可:
const useStyles = () => makeStyles({
root: {
marginTop: '100px',
marginBottom: '100px',
backgroundColor: 'red',
}
});
至:
const useStyles = makeStyles({
root: {
marginTop: '100px',
marginBottom: '100px',
backgroundColor: 'red',
}
});
我遇到的问题是 Material-UI makeStyles 不起作用。 我想应用我的 css 样式,但不起作用。 我认为是Bootstrap或MaterialTable造成的。 虽然 Bootstrap4 像 'mt'、'mb' 一样工作,但 makeStyles 不工作。 这是Bootstrap造成的吗?另外,同时使用 bootsrap4 和 material-ui 时会发生这种情况吗? 这是我的 package.json.
{
"name": "react-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"material-table": "^1.69.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
如果你知道原因,请告诉我。
import { makeStyles } from '@material-ui/core';
const useStyles = () => makeStyles({
root: {
marginTop: '100px',
marginBottom: '100px',
backgroundColor: 'red',
}
});
export const Table = () => {
const classes = useStyles();
const [dataAll, setDataAll] = useState([]);
useEffect(() => {
CheckListService.getList().then((response) =>
setDataAll(response.data)
)
}, [])
const columns = [
{
title: 'リスト番号', field: 'listNo'
},
{
title: '採用日', field: 'saiyouDate'
},
{
title: 'バージョン', field: 'version'
},
{
title: '種別', field: 'shubetu'
},
{
title: 'ライセンス', field: 'licenseManage'
},
{
title: '用途', field: 'youto'
},
{
title: '備考', field: 'bikou'
},
{
title: '承認者', field: 'authorizer'
},
{
title: '承認日', field: 'approvalDate'
},
{
title: 'URL', field: 'url'
}
]
return (
<div>
<div className="container">
<div className={classes.root}>
<MaterialTable
title="使用許可ソフトウェアリスト"
data={dataAll}
columns={columns}
style={{
marginTop: '50px',
whiteSpace: 'nowrap',
}}
options={{
headerStyle: {
backgroundColor: '#75A9FF',
color: '#FFF'
}
}}
localization={localizationJapanese}
/>
</div>
</div>
<Box pt={4}>
<Copyright />
</Box>
</div>
)
}
只需更改这些行即可:
const useStyles = () => makeStyles({
root: {
marginTop: '100px',
marginBottom: '100px',
backgroundColor: 'red',
}
});
至:
const useStyles = makeStyles({
root: {
marginTop: '100px',
marginBottom: '100px',
backgroundColor: 'red',
}
});