0

编辑：经过进一步测试，似乎每次重新渲染组件时都会再次执行材料 UI 的 makeStyles，而 JSS 的 createUseStyles 则不是！

我有一个组件必须根据状态动态更改样式。当我使用随 material-ui 提供的 makeStyles 时，代码可以完美运行：

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    position: "relative",
    borderRadius: filteredItems.length > 0 ? "4px 4px 0 0" : "4px 4px 4px 4px", // this is the relevant line
    backgroundColor: "white",
    color: "black",
  },
}));

但是我不想用material-ui，我只想用JSS。不幸的是，它不起作用。看起来filteredItems.length > 0总是返回false，所以我猜想createUseStyles由于某种原因的执行方式与makeStyles不同：

import { createUseStyles } from "react-jss";

const useStyles = createUseStyles(theme => ({
  root: {
    position: "relative",
    borderRadius: filteredItems.length > 0 ? "4px 4px 0 0" : "4px 4px 4px 4px", // this is the relevant line
    backgroundColor: "white",
    color: "black",
  },
}));

我知道 material-ui 在 JSS 引擎下运行，所以我对这种行为感到困惑。我想过添加两个 CSS 类并在我的 JSX 中切换它们，但我认为解决样式中的问题是这里最干净的解决方案。任何人都知道为什么会发生这种情况或如何解决这个问题？

EDIT2：为了解决这个问题，我只是创建了两个类并在 JSX 中切换它们：

const useStyles = createUseStyles(() => {
  return ({
    root: {
      position: "relative",
      borderRadius: "4px 4px 4px 4px",
      backgroundColor: "white",
      color: "black",
    },
    withItems: {
      borderRadius: "4px 4px 0 0",
    },
  })
});

接着：

<div className={filteredItems.length > 0 ? `${classes.root} ${classes.withItems}` : classes.root}>
4

1 回答 1

0

你试过这种方法吗？

const useStyles = makeStyles({
  root: {
    position: "relative",
    backgroundColor: "white",
    color: "black",
    borderRadius: props.withItems ? "4px 4px 0 0" : "4px 4px 4px 4px",
    // or
    // borderRadius: "4px 4px 4px 4px",
    // borderRadius: props.withItems && "4px 4px 0 0",
    color: props => props.color,
  },
});


render() {
  const classes = useStyles({ withItems: filteredItems.length > 0 });

  return <div className={classes.root} />;
}
于 2019-12-22T05:30:12.860 回答