如何合并来自父级和子级组件的makeStyle类？

Question

如何将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>
  )
}

Answer 1

clsx在Material-UI内部使用，是组合多个类名的便捷实用程序。在子组件中，您可以从道具中抓取for(Map.Entry entry : exchange.getIn().getHeaders().entrySet()) { System.out.println("Key : " + entry.getKey()+ " Value : " + entry.getValue()); } ，然后在渲染的Key : Accept Value : */* Key : CamelHttpHost Value : null Key : CamelHttpMethod Value : GET Key : CamelHttpPath Value : / Key : CamelHttpPort Value : 80 Key : CamelHttpQuery Value : null Key : CamelHttpRawQuery Value : null Key : CamelHttpScheme Value : null Key : CamelHttpUri Value : / Key : CamelHttpUrl Value : http://0.0.0.0:5000/ Key : CamelNettyChannelHandlerContext Value : ChannelHandlerContext(handler, [id: 0x0553776f, L:/0:0:0:0:0:0:0:1:5000 - R:/0:0:0:0:0:0:0:1:55001]) Key : CamelNettyLocalAddress Value : /0:0:0:0:0:0:0:1:5000 Key : CamelNettyRemoteAddress Value : /0:0:0:0:0:0:0:1:55001 Key : content-length Value : 0 Key : Cookie Value : x_az_url=https://.google.com;x_other_cookie=stuff Key : Host Value : localhost:5000 Key : User-Agent Value : curl/7.64.1 中使用className：

className={clsx(className, classes.button)}