Question

材料UI使用className进行样式设计。但是如何将样式传递给sub react组件？

下面是我的风格定义。

const styles = createStyles({
      root: {
        backgroundColor: 'transparent !important',
        boxShadow: 'none',
        paddingTop: '25px',
        color: '#FFFFFF'
      },
      subComponentStyle: {
         ...
      }
    });

我这样使用：

...
const NavigationBar = (props) => {
   const { classes } = props;
   return ( 
       <div className={classes.root}>
        // Add other code here
          <SubComponent ... > // how to pass `classes.subComponentStyle` style here
       </div>
   )
}
...
export default withStyles(styles)(NavigationBar);

如果SubComponent组件也与withStyles一起导出。如何传递某些样式来覆盖其自身的样式？

我的SubComponent导出为：

const styles = createStyles({
   ...
});

const SubComponent = ({classes}) => {
...
}

export default withStyles(styles)(SubComponent);

如您所见，

它有自己的classes。我不想完全覆盖其类。有没有办法将传入的类与其内部类合并？

Answer 1

//编辑为合并样式

如果您传递类以及将子类包装为Styles，则MUI将合并样式。即：

import { styles } from './NavStyles'

const NavigationBar = (props) => {
   const { classes } = props;
   return ( 
       <div className={classes.root}>
          <SubComponent classes={classes} >
       </div>
   )
};

export default withStyles(styles)(NavigationBar);

然后还将样式应用于子组件


import { styles } from './SubCompStyles'

const SubComponent = ({classes}) => {
 // classes object is a merge of both parent and child styles
 // ... component logic
};

export default withStyles(styles)(SubComponent)

Answer 2

以下是如何使用钩子 API 做到这一点：

子组件

const useStyles = makeStyles((theme) => ({
  root: {
    borderRadius: 3,
    color: 'white',
    padding: '0 30px',
    width: '12em',
    height: 43,
    borderRadius: 21.5,
    textTransform: 'capitalize',
  ... your styles here. 
  },
}))

export default function AuthSecondaryButton(props) {
  const classes = useStyles()
  console.log('s', props.className)
  return (
    <Button
      {...props}
      className={clsx({
        [classes.root]: true,
        [props.className]: true,
      })}
    />
  )
}

父组件

const useStyles = makeStyles((theme) => ({

 secondaryButton: {
    marginTop: theme.spacing(1),
  },
}))


export default function App(props) {
  const classes = useStyles()
return(
  <AuthSecondaryButton
              onClick={onClickSecondaryButton}
              className={classes.secondaryButton}
            >
              Sign Up
            </AuthSecondaryButton>
)

Answer 3

对@clever_usernames 方法稍作调整。这使用了 classnames 包，而不是我们在项目中使用的 clsx 包。

替换这个...

   className={clsx({
        [classes.root]: true,
        [props.className]: true,
      })}

有了这个...

className={classNames(classes.root, props.className)}

完整示例

子组件

import classNames from 'classnames'

const useStyles = makeStyles((theme) => ({
  root: {
    borderRadius: 3,
    color: 'white',
    padding: '0 30px',
    width: '12em',
    height: 43,
    borderRadius: 21.5,
    textTransform: 'capitalize',
  ... your styles here. 
  },
}))

export default function AuthSecondaryButton(props) {
  const classes = useStyles()
  console.log('s', props.className)
  return (
    <Button
      {...props}
      className={classNames(classes.root, props.className)}
    />
  )
}

父组件

const useStyles = makeStyles((theme) => ({

 secondaryButton: {
    marginTop: theme.spacing(1),
  },
}))


export default function App(props) {
  const classes = useStyles()
return(
  <AuthSecondaryButton
              onClick={onClickSecondaryButton}
              className={classes.secondaryButton}
            >
              Sign Up
            </AuthSecondaryButton>
)

如何将className样式传递给“ material-ui”中的子组件？

3 个答案:

完整示例