正文 

当前位置： 首页 > 知识 >

绑定后 CSS 类样式未更新

     2023-02-22     139

关键词：

【中文标题】绑定后 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]

【讨论】：

淘汰赛绑定不更新类样式

】淘汰赛绑定不更新类样式【英文标题】：Knockoutbindingsnotupdatingclassstyles【发布时间】：2013-02-0501:12:39【问题描述】：我试图弄清楚如何通过淘汰赛从html中添加和删除类。应该发生的是，当我单击卡车时，按钮应更新为btn-red类... 查看详情

在 ViewModel 中更新其绑定后，按钮未启用 [重复]

】在ViewModel中更新其绑定后，按钮未启用[重复]【英文标题】：Buttondoesn\'tgetenabledafteritsbindinggetsupdatedintheViewModel[duplicate]【发布时间】：2021-11-0208:27:19【问题描述】：这让我发疯了，说真的。我有一个对话框，其中包含一对递增... 查看详情

保存后 CSS 样式未应用于网站（在 XAMPP localhost 上运行）

】保存后CSS样式未应用于网站（在XAMPPlocalhost上运行）【英文标题】：CSSstyleisnotappliedtowebsiteaftersaving(runningonXAMPPlocalhost)【发布时间】：2020-02-0419:14:02【问题描述】：我最近开始使用PHP，所以我也开始使用XAMPP，在过去的两天里，... 查看详情

使用 AJAX 绑定时创建/更新后具有 IEnumerable 属性的 Kendo Grid 模型未正确更新

】使用AJAX绑定时创建/更新后具有IEnumerable属性的KendoGrid模型未正确更新【英文标题】：KendoGridmodelwithanIEnumerablepropertynotupdatingcorrectlyafterCreate/UpdatewhenusingAJAXbinding【发布时间】：2013-07-0323:06:34【问题描述】：我遇到了一个问题，... 查看详情

在其他屏幕中更新绑定后，SwiftUI 列表行未刷新

】在其他屏幕中更新绑定后，SwiftUI列表行未刷新【英文标题】：SwiftUIListRowsNotRefreshedAfterUpdatingBindingInOtherScreen【发布时间】：2020-01-3014:36:15【问题描述】：我有一个简单的watchOSSwiftUI应用程序。该应用程序具有三个屏幕。第一个... 查看详情

CSS 类选择器样式未在 React 项目中应用

】CSS类选择器样式未在React项目中应用【英文标题】：CSSclassselectorstylesnotbeingappliedinReactProject【发布时间】：2017-12-0101:50:25【问题描述】：使用Webpack处理React项目。在style.css中添加一些样式并使用importstylefrom\'./style.css\';导入组件... 查看详情

实体模式下的 NSArrayController 在具有内容绑定的 NSTableView 被编辑后未更新

】实体模式下的NSArrayController在具有内容绑定的NSTableView被编辑后未更新【英文标题】：NSArrayControllerinentity-modenotupdatingafterNSTableViewwithcontent-bindinghasbeenedited【发布时间】：2013-01-3119:12:36【问题描述】：我有一个配置了模式“实体... 查看详情

iOS 10：CSS 样式未应用于类更改

】iOS10：CSS样式未应用于类更改【英文标题】：iOS10:CSSstylesnotbeingappliedonclasschange【发布时间】：2017-03-0905:55:45【问题描述】：我正在使用ionic和angular创建适用于Android和iOS的应用程序。在android上一切正常。iOS是问题（当然）。我... 查看详情

Tailwind CSS 在构建后未应用样式

】TailwindCSS在构建后未应用样式【英文标题】：TailwindCSSnotapplyingStylesafterBuild【发布时间】：2021-12-0614:32:23【问题描述】：我已经使用Tailwindcss创建了NextJs应用程序，在开发环境中一切正常，但是当我使用npmrunbuild命令时，我的tail... 查看详情

Tailwind CSS 未应用某些样式

】TailwindCSS未应用某些样式【英文标题】：TailwindCSSnotapplyingcertainstyles【发布时间】：2021-09-0919:05:48【问题描述】：我使用next.js文档中提供的tailwindstarterrepo创建了一个next.js应用程序，并且tailwind运行良好。但是我最近遇到了一个... 查看详情

vs2010打开样式表css提示未能完成操作未指定的错误

...系统系统的windowupdate更新后在vs2010中打开网站然后打开css样式表文件打不开提示未能完成操作未指定的错误请按以下步骤操作：1、打开一个aspx或html文件，在“HTML源编辑器”中的Schema改为“IE6”2、双击一个css文件，它现在可以... 查看详情

刷新网站时样式表未更新

】刷新网站时样式表未更新【英文标题】：StylesheetnotupdatingwhenIrefreshmysite【发布时间】：2012-09-2422:36:12【问题描述】：我正在创建一个网站，但是当我对网站上的样式表进行更改并刷新网站时，没有任何更改。我尝试使用查看源... 查看详情

刷新 WPF Datagrid 未绑定到可观察集合？

】刷新WPFDatagrid未绑定到可观察集合？【英文标题】：RefreshWPFDatagridnotboundtoobservablecollection?【发布时间】：2016-11-0811:49:12【问题描述】：我正在使用带有Datagrid的LINQtoSQL并将数据绑定到自动生成的字段。通过LINQ提交更改时，数据... 查看详情

使用 Binding . 或 Binding 时数据绑定未更新

】使用Binding.或Binding时数据绑定未更新【英文标题】：DatabindingNotUpdatingWhenUsingBinding.orBinding使用Binding.或Binding时数据绑定未更新【发布时间】：2011-01-2407:19:57【问题描述】：我有一个绑定到ListBox的地址的ObservableCollection。然后在... 查看详情

jquerydom操作

...载事件--> 页面加载完成后-->只执行一次 为页面元素绑定事件===================================一.样式操作addClass()removeClass()hasClass()toggleClass()复合事件:hover中定义鼠标移入移出函数样式获取css("name")____键值对一个函数-->获取样式... 查看详情

自定义绑定未触发更新

】自定义绑定未触发更新【英文标题】：custombindingisnotfiringupdate【发布时间】：2014-09-1315:25:57【问题描述】：我正在使用使用Knockout.js和JqueryMobileUI组合的系统。我遇到的问题之一是将JqueryMobile应用于具有knockout:if绑定的元素。我... 查看详情

css——链接伪类选择器

a:link链接未被点击过的样式a:visited链接点击过后的样式a:hover链接鼠标经过时样式a:active链接点未松开时的样式 查看详情

参数更新后 Blazor 页面未重新呈现

】参数更新后Blazor页面未重新呈现【英文标题】：Blazorpagenotrerenderingafterparameterupdated【发布时间】：2019-09-1212:21:45【问题描述】：我开始使用新的ASP.NET核心Web应用和blazor客户端模板(3.0.0-preview4-19216-03)。为了向现有的Counter.razor页... 查看详情