从样式组件转换到材质- ui:材质可以在div上使用' withStyles() '吗?

Question

我的应用程序的逻辑和操作方面是不可触及的，所以我不能去挖掘组件从<FriendlyComponentName />到<div css={{styleObject}} />通过材料makeStyles()或什么的变化。

现有样式组件示例:

PageNav: styled.div`
width: 1440px;
`,

我从材料withStyles()开始维护组件名称:

PageNav: withStyles({
root: {
width: "1440px",
},
})(div)

…除此之外，正如您在第二块的最后一行所看到的，材料不知道如何处理div和错误。材料部件(Typography等)按预期工作

我试着放在那里的东西:

• 样式组件styled.div
• 材料styled("div")
• 只是普通(div)和("div")
• 在root:{}
之外提升样式定义1级

目标是用材质UI定义替换样式组件定义，同时保持现有名称(如上面的PageNav)。

是可能的样式HTML组件像这样使用材料UI?

Answer 1

下面是用材质UI定义替换了样式组件定义的代码片段。它还包括一个重新定义CSS属性的例子，如果你决定在重用的时候稍微调整一下你的组件…

import "./styles.css";
import { withStyles, createStyles, makeStyles } from "@material-ui/core/styles";
const PageNav = withStyles({
root: {
width: "1440px",
height: "80px",
margin: "0 auto",
color: "tomato", // default color
padding: "24px 140px 24px 60px",
backgroundColor: "white",
boxSizing: "border-box",
display: "flex",
justifyContent: "space-between"
}
})(({ classes, children }) => <div className={classes.root}>{children}</div>);
const useStyles = makeStyles((theme) =>
createStyles({
root: {
color: "blue" // redefined  color
}
})
);
export default function App() {
const classes = useStyles()
return (
<PageNav classes={{ root: classes.root }}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</PageNav>
);
}

代码片段的实例可以在这里找到。

Answer 2

你试过这样设置样式吗?基本上，您可以通过useStyles为任何元素创建样式，然后您可以简单地在代码中使用创建的样式。