问题描述
由于我分离了我的 jss 文件并将其从 makeStyles 更改为 withStyles 以避免钩子问题,因此我在呈现我的 react 组件时遇到了问题。
我在我的 jss 样式文件中收到一条错误消息,因为有几个方法在括号中包含一个“主题”,以便样式生效。
我如何更改它以使其正确呈现?
accessControl.component.js
import {connect,useSelector} from "react-redux";
import DataTable from "./userListTable.component";
import {Paper} from "@material-ui/core";
function AdminAccessControl(props) {
const { children,value,index,...other } = props;
// select user object from redux
const user = useSelector(state => state.user);
// select school object from redux
const school = useSelector(state => state.diveSchool);
const classes = useStyles();
const [role,setRole] = useState({
userRole: "",});
const handleChange = (property) => (e) => {
setRole({
// override the changed property and keep the rest
...role,[property]: e.target.value,});
}
return (
<div className={classes.root}>
<StyledTabs
value={value}
onChange={handleChange}
indicatorColor="primary"
textColor="primary"
aria-label="styled tabs example"
centered>
<StyledTab label="User Access Control" />
{/*<DataTable />*/}
<StyledTab label="Scuba School Access Control" />
{/*<DataTable />*/}
</StyledTabs>
<Typography className={classes.padding} />
</div>
);
}
function mapStatetoProps(state){
const { user } = state.auth;
const { school } = state.diveSchool;
return {
user,school,};
}
export default compose(
connect(
mapStatetoProps,),withStyles(useStyles)
)(AdminAccessControl);
myJss-style.js
export const useStyles = (theme) => ({
root: {
flexGrow: 1,},padding: {
padding: theme.spacing(3),demo1: {
backgroundColor: theme.palette.background.paper,demo2: {
backgroundColor: '#2e1534',});
export const StyledTabs = () => ({
indicator: {
display: 'flex',justifyContent: 'center',backgroundColor: 'transparent','& > span': {
maxWidth: 40,width: '100%',backgroundColor: '#635ee7',})((props) => <StyledTabs {...props} TabIndicatorProps={{ children: <span /> }} />);
export const StyledTab = (theme) => ({
root: {
textTransform: 'none',color: '#fff',fontWeight: theme.typography.fontWeightRegular,fontSize: theme.typography.pxToRem(15),marginRight: theme.spacing(1),'&:focus': {
opacity: 1,})((props) => <StyledTab disableRipple {...props} />);
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)