reactjs - 在 Material Table 中设置 create-row 输入元素的样式
解决方案
createMuiTheme
您可以使用material-ui lib 设置这些元素的样式:
const theme = createMuiTheme({
overrides: {
MuiTableRow: {
root: {
"&[mode=add]": {
"& .MuiInputBase-root": {
width: "90%",
background: '#dedede',
}
}
}
}
}
});
当您需要在特定单元格中设置特定输入的样式时,问题就开始了,因为您无法控制该元素的样式/道具。
该解决方案非常难看,但我找不到更好的解决方案(至少对于 1.57.2 版):
const theme = createMuiTheme({
overrides: {
MuiTableRow: {
root: {
"&[mode=add]": {
"& .MuiInputBase-root": {
width: "90%",
background: "#a1a1a1"
},
"& .MuiTableCell-body:nth-child(4)": {
"& .MuiInputBase-root": {
width: "100%",
background: "#d1d1d1"
}
}
}
}
}
}
});
您可以在此处找到完整的工作示例:https ://codesandbox.io/s/material-table-style-create-row-cbpzk?file=/demo.js
推荐阅读
- java - 从 JSON-LD 或 RDF 生成 POJO 以与 Jackson 或 GSON 一起使用
- pyspark - pyspark中的动态布尔连接
- python - 处理大数以计算组合数
- ruby-on-rails - Rails 6 Active Storage image_processing gem 问题
- angular - 如何使用事件发射器触发子组件和父组件中的函数?
- java - 如何在eclipse上自动将jar文件添加到每个新项目?
- sql - 如何将“总计”标签添加到数字列?
- python - 对单个句子进行预测时,收到错误“模型的特征数必须与输入匹配”。
- ios - 从图像中检测文本并获取关键字的矩形
- node.js - Typescript lambda中不同包之间的代码重用