前端项目实战壹佰贰拾react-admin+material ui-react-admin之SimpleList中rowStyle设置样式

简介: 前端项目实战壹佰贰拾react-admin+material ui-react-admin之SimpleList中rowStyle设置样式
import { List, SimpleList,TextField } from 'react-admin';
export const RSimpleStandard = () => (
    <List resource="t_geyao_person">
        <SimpleList 
            primaryText={<TextField source="id" />}
            secondaryText={record => `${record.name} views`}
            tertiaryText={record => record.name}
            linkType={record => record.status ? "edit" : "show"}
            rowStyle={record => ({ backgroundColor: record.id >= 2 ? '#efe' : 'white' })}
        />
    </List>
);

运行结果

image.png

相关文章
|
10天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
29 0
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
83 0
|
4月前
|
前端开发
Vue3/React 动态设置 ant-design/icons 图标
Vue3/React 动态设置 ant-design/icons 图标
109 1
|
4月前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
|
8月前
|
Web App开发 前端开发 JavaScript
VSCode如何设置Vue前端的debug调试
VSCode如何设置Vue前端的debug调试
542 0
|
8月前
|
资源调度 前端开发 JavaScript
关于react-admin+material ui项目的总结
关于react-admin+material ui项目的总结
110 0
|
8月前
|
前端开发
前端项目实战壹佰叁拾react-admin+material ui-react-admin之SelectColumnsButton之使用
前端项目实战壹佰叁拾react-admin+material ui-react-admin之SelectColumnsButton之使用
35 0
|
5月前
|
Web App开发 缓存 前端开发
前端项目根据环境设置请求地址和接口代理,以及解决多个localhost服务token被覆盖
一般开发项目除了正式的生产环境,还会有对应的开发环境、测试环境和预发布环境,每个环境所访问的接口地址肯定不一样,如果自己一个个手动修改那就太不程序猿了
176 1
|
5月前
|
前端开发 JavaScript
组件与Props:React中构建可复用UI的基石
组件与Props:React中构建可复用UI的基石
47 0