如何将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>
)
}
答案 0 :(得分: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)}