JSS和React JS的边框半径问题

Question

EDIT：经过进一步测试后，似乎每次重新渲染组件时，材质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，所以我猜出于某种原因createCreateStyles的执行与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}>

Answer 1

您尝试过这种方法吗？

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} />;
}