Reactjs 如何将类名样式传递给“材质ui”中的子组件？

材质UI使用

className

进行样式设置。但是如何将样式传递给子组件呢

下面是我的风格定义

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);

---

如您所见，它有自己的

类

。我不想完全重写它的类。是否有方法将传入的类与其内部类合并？

//编辑为合并样式

如果您通过类并使用样式包装子级，则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);

---

以下是使用hook 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>
)

const useStyles=makeStyles（（主题）=>({
根目录：{
边界半径：3，
颜色：'白色'，
填充：“0 30px”，
宽度：“12em”，
身高：43，
边界半径：21.5，
textTransform:'大写'，
…你的风格在这里。
},
}))
导出默认函数AuthSecondaryButton（道具）{
常量类=useStyles（）
console.log（'s'，props.className）
返回(
)
}

父组件

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>
)

const useStyles=makeStyles（（主题）=>({
辅助按钮：{
marginTop：主题。间距（1），
},
}))
导出默认功能应用程序（道具）{
常量类=useStyles（）
返回(
注册
)

My

SubComponent

也有自己的

类

。我不想完全重写SubComponent样式。有没有办法将传入的类与内部类合并？当使用此答案中的第二种方法时，这些类应该通过

withStyles

自动与内部类合并（通过子组件的

类

属性传递

类

）。我刚刚尝试了@RyanCogswell的解决方案-并且可以确认它们是否合并。当您使用typescript并且两种类型不匹配时，这应该如何工作？它将显示警告：材质UI：提供给类属性对象的键

xxx

未在子组件中实现。如果导航栏和子组件类对象键不同步。根据，我建议在这种情况下使用和不合并类。