分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了迁移到 Material-UI v5 时，如何处理条件类？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决迁移到 Material-UI v5 时，如何处理条件类？？

开发过程中遇到迁移到 Material-UI v5 时，如何处理条件类？的问题如何解决？下面主要结合日常开发的经验，给出你关于迁移到 Material-UI v5 时，如何处理条件类？的解决方法建议，希望对你解决迁移到 Material-UI v5 时，如何处理条件类？有所启发或帮助；

在 official migration guide 中，他们给出了以下示例，将代码从 JsS (@H_58_3@makeStyles) 更改为新的 styled 模式。

之前：

const useStyles = makeStyles((themE) => ({
    BACkground: theme.palette.priMary.main,}));

function Component() {
    const classes = useStyles();
    return <div classname={Classes.root} />
}

之后：

const MyComponent = styled('div')(({ theme }) => 
    ({ BACkground: theme.palette.priMary.main }));

function App(props) {
    return (
        <themeProvIDer theme={themE}>
            <MyComponent {...props} />
        </themeProvIDer>
    );
}

这对单个类来说没问题，但是当代码有条件类时怎么办？

例如

<main classname={Classnames(content,open ? contentopen : contentClosed)}>
    {/* content goes here */}
</main>

这里，content、contentopen 和 contentClosed 是从 useStyles 返回的类，但 contentopen 和 contentClosed 是基于open 的值。

使用新的 styled 方法，我们生成组件而不是生成类名。有没有办法优雅地复制渲染而不诉诸于三元表达式中的内容重复？

例如我们不想做这样的事情：

function App(props) {
    return (
        <themeProvIDer theme={themE}>
            {open
            ? <MyOpenComponent {...props}>{/* content */}</MyOpenComponent>
            : <MyClosedComponent {...props}>{/* content */}</MyClosedComponent>
        </themeProvIDer>
    );
}

解决方法

有很多可能的方法来解决这个问题。使用 styled 的一种方法是利用 props 来实现动态样式，而不是尝试使用多个类。

这是一个例子：

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

const StyledDiv = styled("div")(({ open,theme }) => {
  const color = open
    ? theme.palette.priMary.contrastText
    : theme.palette.secondary.contrastText;
  return {
    BACkgroundColor: open
      ? theme.palette.priMary.main
      : theme.palette.secondary.main,color,padding: theme.spacing(0,1),"& button": {
      color
    }
  };
});

export default function App() {
  const [open,setOpen] = React.useState(false);
  return (
    <StyledDiv open={open}>
      <h1>{open ? "Open" : "Closed"}</h1>
      <Button onClick={() => setOpen(!open)}>Toggle</Button>
    </StyledDiv>
  );
}