2

我正在尝试使用类名 npm 库有条件地呈现类名，并且在 DOM 中似乎它们正在被添加，但我无法看到这些类背后的 CSS 效果。我主要是试图改变边界条件。

下面是 useStyles 中带有 CSS 的相关类：

import classNames from 'classnames';

const useStyles = makeStyles(theme => ({
 newOrderBorder: {
   border: `2px solid ${theme.palette.primary.main}`
 },
 orderSectionBorder: {
  border: 'unset'
 },
 orderSection: {
   backgroundColor: theme.palette.secondary.main,
   marginTop: theme.spacing(1),
   paddingTop: theme.spacing(0.5),
   paddingBottom: theme.spacing(0.5)
 }
}));

下面我尝试设置条件以设置类名的状态并尝试在代码中使用它们（短片段）：

const CompanyOrder = props => {
  const classes = useStyles();
  
//setting classnames
  const borderColorByStatus = classNames({
    newOrderBorder: orderStatus === 'new',
    orderSectionBorder: orderStatus !== 'new',
    orderSection: true
  })
  return (
    <Grid className={borderColorByStatus} container>   //trying to use borderColorByStatus
        <Grid container direction='column' item xs={2}>
          <Typography className={classes.orderTitle} color="textSecondary">
            Product Name
          </Typography>
          <Typography variant='h2' component='h3'>
           {name}
          </Typography>
        </Grid>
    </Grid>
  );
}

在 DOM 中，我注意到类名被正确识别，但不幸的是这些类没有任何效果。

4

0 回答 0