如何将className样式传递给``材料ui''中的子组件

Question

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

如果SubComponent组件也用withStyles导出。我如何通过一些样式覆盖自己的样式？

我的SubComponent被导出为：

const styles = createStyles({
   ...
});
const SubComponent = ({classes}) => {
...
}
export default withStyles(styles)(SubComponent);

如您所见，它具有自己的classes。我不想完全覆盖其课程。有没有办法将通过的课程与内部类合并？

Answer 1

//编辑为合并样式

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

herce how api可以做到这一点：

sub component

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

---

完整示例

sub component

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