绑定后 CSS 类样式未更新

Posted 2023-02-22

【中文标题】绑定后 CSS 类样式未更新

【英文标题】：CSS class style not getting updated after binding it

【发布时间】：2022-01-18 14:32:10

【问题描述】：

我正在做一个反应项目，遇到了这个问题。我正在将我的自定义类名称 $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>

【参考方案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'

【参考方案2】：

我认为你的问题是你错过了空间。 尝试在 $!row.status 之间添加空格？ classes.disableRow : "" 和 $classes[row.customClass]