使用 Typescript 有条件地应用 css 在 React JS 中不起作用答案

【问题标题】：Conditionally applying css not working in React JS using Typescript使用 Typescript 有条件地应用 css 在 React JS 中不起作用
【发布时间】：2021-11-29 19:32:48
【问题描述】：

我有以下代码，而 onclick 我应该使 Box 保持突出显示并带有黑色边框。

interface BigButtonProps {


onClick(): void;
  Title: string;
  Description?: string;
  startIcon?: React.ElementType;
}

const BigButton: FC<BigButtonProps> = (props: BigButtonProps, { active }) => {
  const [isClicked, setClicked] = useState(false);
  const clickMe = () => {
    setClicked(!isClicked);
    console.log("say hello");
  };
  const SvgIconStyles: CSS.Properties = {
    display: "block",
  };
  const BoxStyles: CSS.Properties = {
    border: "1.5px solid black",
  };

  const BoxStylesActive: CSS.Properties = {
    border: "1.5px solid black",
  };
  return (
    <Box
      sx={{
        height: {
          xs: "45px",
          md: "100px",
        },
        width: {
          xs: "45px",
          md: "300px",
        },
    borderRadius: "10px",

    boxShadow: "0 2px 3px 2px rgba(0, 0, 0, .125)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    ":hover": {
      border: "1.5px solid blue",
    },
  }}
  className={classNames("BoxStyles", { BoxStylesActive: isClicked })}
  onClick={() => {
    clickMe();
  }}
>
  <Typography variant="h1">{props.Title}</Typography>

  <Typography variant="subtitle1">{props.Description}</Typography>
  <SvgIcon
    component={CheckCircleIcon}
    sx={{
      display: "block",
    }}
  />
</Box>


);
};

export default BigButton;

当我单击按钮时，它应该将边框颜色更改为纯黑色。当我激活 CSS 时，它会在点击时发生变化，但不会保持为黑色。所以我必须有条件地应用 CSS，所以我确实使用属性类型 CSS.Properties 创建了 CSS 方法；我正在使用打字稿，这是我正在使用的一个反应组件。我不确定我在这里做错了什么？

【问题讨论】：

嗯，我不明白这将如何应用局部变量中的样式。 BoxStyles 和 BoxStylesActive 只是局部变量，不是实际的类。
这个问题写得不好。您应该提供一个最小的代码示例，您可以在其中删除不需要的信息。另外，下次请提供使用过的库，如sx 或classNames()。我知道这些，因为我过去曾与这些合作过，但很多人不知道。

标签： css reactjs typescript conditional-statements

【解决方案1】：

你可以试试

<Box styles={isClicked ? BoxStylesActive : BoxStyles}>
// ...

请注意，BoxStylesActive 和 BoxStyles 在您粘贴的代码中是相同的。因此，如果您没有看到任何变化，请不要感到惊讶。

<Box sx={{border: isClicked ? "1.5px solid black" : none}}>
// ...

这可以交替使用。

您在这里混合了 sx 道具和样式。此外，您的 BoxStylesActive 是一个对象，没有 css 类。所以使用classNames()不会对它产生影响。

【讨论】：