Reactjs 如何从父组件和子组件组合makeStyle类？

如何将makeStyle类从父组件传递到子组件，并将它们与子组件中的makeStyle类组合？例如，如下所示，将断点隐藏添加到子组件样式中

示例子组件：

import React from "react"
import { Button } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"

const useStyles = makeStyles(theme => ({
  button: {
    background: "#000",
    color: "white",
    //lots of other css here so we dont want to repeat it in the parent component

  },
}))

export default function PrimaryButton(props) {
  const classes = useStyles()
  const { children, fullWidth = false } = props

  return (
    <Button
      fullWidth={fullWidth}
      className={classes.button}
      variant="contained"
    >
      {children}
    </Button>
  )
}

import React from "react"
import { PrimaryButton } from "components/PrimaryButton"
import { makeStyles } from "@material-ui/core/styles"

const useStyles = makeStyles(theme => ({
  primaryButton: {
    display: "inline-block",
    [theme.breakpoints.down("sm")]: {
      display: "none",
    },
  },
}))

export default function PrimaryButton(props) {
  const classes = useStyles()

  return (
    <PrimaryButton
      className={classes.primaryButton}
    >
      Button text
    </PrimaryButton>
  )
}

从“React”导入React
从“@material ui/core”导入{Button}
从“@material ui/core/styles”导入{makeStyles}”
const useStyles=makeStyles（主题=>({
按钮：{
背景：“000”，
颜色：“白色”，
//这里有很多其他css，所以我们不想在父组件中重复它
},
}))
导出默认功能PrimaryButton（道具）{
常量类=useStyles（）
const{children，fullWidth=false}=props
返回(
{儿童}
)
}

父组件示例：

import React from "react"
import { Button } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"

const useStyles = makeStyles(theme => ({
  button: {
    background: "#000",
    color: "white",
    //lots of other css here so we dont want to repeat it in the parent component

  },
}))

export default function PrimaryButton(props) {
  const classes = useStyles()
  const { children, fullWidth = false } = props

  return (
    <Button
      fullWidth={fullWidth}
      className={classes.button}
      variant="contained"
    >
      {children}
    </Button>
  )
}

import React from "react"
import { PrimaryButton } from "components/PrimaryButton"
import { makeStyles } from "@material-ui/core/styles"

const useStyles = makeStyles(theme => ({
  primaryButton: {
    display: "inline-block",
    [theme.breakpoints.down("sm")]: {
      display: "none",
    },
  },
}))

export default function PrimaryButton(props) {
  const classes = useStyles()

  return (
    <PrimaryButton
      className={classes.primaryButton}
    >
      Button text
    </PrimaryButton>
  )
}

从“React”导入React
从“组件/PrimaryButton”导入{PrimaryButton}
从“@material ui/core/styles”导入{makeStyles}”
const useStyles=makeStyles（主题=>({
主按钮：{
显示：“内联块”，
[主题.breakpoints.down（“sm”）]：{
显示：“无”，
},
},
}))
导出默认功能PrimaryButton（道具）{
常量类=useStyles（）
返回(
按钮文本
)
}

在Material UI内部使用，是组合多个类名的方便实用程序。在子组件中，您可以从道具中抓取

className

，然后在它呈现的

按钮中使用
className={clsx（className，classes.button）}
：

import React from "react";
import { Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx";

const useStyles = makeStyles(theme => ({
  button: {
    background: "#000",
    color: "white"
  }
}));

export default function PrimaryButton(props) {
  const classes = useStyles();
  const { children, className, fullWidth = false } = props;

  return (
    <Button
      fullWidth={fullWidth}
      className={clsx(className, classes.button)}
      variant="contained"
    >
      {children}
    </Button>
  );
}

从“React”导入React；
从“@material ui/core”导入{Button}”；
从“@material ui/core/styles”导入{makeStyles}”；
从“clsx”导入clsx；
const useStyles=makeStyles（主题=>({
按钮：{
背景：“000”，
颜色：“白色”
}
}));
导出默认功能PrimaryButton（道具）{
const classes=useStyles（）；
const{children，className，fullWidth=false}=props；
返回(
{儿童}
);
}