javascript - 绑定(bind)后 CSS 类样式未更新

Question

我正在做一个 React 元素，遇到了这个问题。我正在将我的自定义类名 ${row.customClass} 传递给组件，并且我正在尝试设置相同的样式，如下面的 CSS 部分所示。当我检查开发人员工具时，我可以看到类 sample 已添加到 HTML 部分所示的其他类中。但样式未应用于自定义类示例。正在应用所有其他样式。谁能告诉我哪里出了问题？

return (
            <tr key={index}>
                {
                rows.map((row, index) => {
                    return <td key={index} className={`${classes.row} ${!row.status ? classes.disableRow : ""
                    }${row.customClass}`}> <customComponent></customComponent></td>
                    })
                    }
             </tr>
        )

CSS

const useStyles = makeStyles(
    (theme) => ({

        row: {
            padding: "10px",
            "& span": {
               wordBreak:"break-all"
              }
        },

        disableRow: {
            color: "grey"
        },
        sample:{
            background:"red",
        }
    })
);

HTML

<td class="makeStyles-row-42 sample"> <span>Data123</span></td>

Answer 1

您正在将键“sample”传递给 classNames，而不是将与您使用 makeStyles 创建的类关联的键传递给它。

例如看看你添加的其他类，你做的

${classes.row}

不是

${'row'}

如果你想在你的 makeStyles 中获得与“sample”关联的类，你需要这样做:

rows.map((row, index) => {
                return <td key={index} className={`${classes.row} ${!row.status ? classes.disableRow : ""
                }${classes[row.customClass]}`}> <customComponent></customComponent></td>
                })
            }

其中 row.customClass 需要是 'sample'