首页 > 其他分享 >antd 的 ProTable 通过rowClassName 设置行的字体颜色时,固定列fixed不生效的问题

antd 的 ProTable 通过rowClassName 设置行的字体颜色时,固定列fixed不生效的问题

时间:2024-05-22 11:51:59浏览次数:20  
标签:rowClassName 样式 selected ProTable 固定 生效 antd row

1、其他列是已经生效了,但是固定列是没有生效的

 

const rowClassName = (record) => {
    return tableTreeSearchKey.includes(record.key) ? 'selected-row' : '';
};
<ProTable
	......
	rowClassName={rowClassName}
>

 

2、分析原因:

固定列的子组件也有color属性,覆盖了selected-row 的样式

3、解决办法:

selected-row 样式中,添加一个覆盖样式即可!

 

标签:rowClassName,样式,selected,ProTable,固定,生效,antd,row
From: https://www.cnblogs.com/wwssgg/p/18205924

相关文章

  • 2024-05-21 Module not found: Error: Can't resolve 'ant-design-vue/dist/antd.css'
    报错:Modulenotfound:Error:Can'tresolve'ant-design-vue/dist/antd.css'in'xxx'原因:引入的antd.css文件实际上应该是reset.css文件,是由于ant-design-vue的官网给的代码和实际下的包的文件不一致导致。解决方案:把import"ant-design-vue/dist/antd.css";改成import"ant......
  • antd-vue 时间选择器限制, 选择不超过七天的范围,且默认时间为当前时间往后七天
    1.template代码<a-range-picker v-model:value="conversationTime" style="margin-right:20px" :disabledDate="disabledDate" @calendarChange="onCalendarChange" @change="onChange" @openChange......
  • antd upload action 不写(前端解析内容)
     在使用AntDesign的Upload组件时,如果不提供action属性,那么文件的上传处理需要通过customRequest属性来自定义实现。以下是一个不使用action属性,而是通过customRequest实现文件上传的例子: importReactfrom'react';import{Upload,message,Button}from'antd';imp......
  • react + antd + js 简单Cron组件,支持国际化
    Cron.jsimportReact,{Fragment,useState,useCallback,useRef,useEffect}from'react';import{Select,TimePicker,Input}from'antd';constOption=Select.Option;constmwidth80={minWidth:80,marginRight:10};constwidt......
  • antd在form中一个select设置另一个select
    需求:所属网络(select)变化的时候,对应空投合约(select)也跟着变化。 constonChainChange=(chainId:any)=>{setCurrChainId(chainId)constcurrOptions=extraObj.airdropContractFormOptions.map((item:any)=>{if(item.network_id===chainId){......
  • antd下拉选择框搜索配置:filterOption
     <SelectallowClearmode="multiple"showArrow={true}showSearch={true}filterOption={(inputValue,option)=>option?.props?.label.includes(inputVal......
  • antd表格日期排序
     {dataIndex:'contractSignDate',key:'contractSignDate',title:'合同签订日期',width:120,ellipsis:true,sorter:(a,b)=>moment(a?.contractSignDate).valueOf()-moment(b?.contractSignD......
  • antd日期选择框,前后日期增加限制
     constdisabledDateStart=useCallback((current)=>{if(!contractEndDateValue){returnfalse}else{returncurrent&&current>contractEndDateValue;}},[contractEndDateValue])constdisabledDateEnd=......
  • antd4表单手机号验证
     //自定义手机号校验规则constvalidatePhone=(_,value)=>{constphoneRegex=/^1[3456789]\d{9}$/;if(!value||phoneRegex.test(value)){returnPromise.resolve();}returnPromise.reject(newError('请输入有效的手机号码'));}......
  • 2024-04-28 记录antd-img-crop参数设置
    前言:以前在做富文本编辑的时候,关于图片裁剪部分使用了antd-img-crop,忘了还有那些可使用的参数,现在上网查找并记录下来吧。antd-img-crop:一个图片裁剪插件,用于包装antd组件库中的upload组件。其官网地址在此:https://github.com/nanxiaobei/antd-img-crop安装:pnpmaddantd-img......