Material Table 中的样式创建行输入元素
Styling create-row input elements in Material Table
我想在 reactjs
的 Materialtable 中增加下拉列表 "Birth Place"
我想要这样的东西,但我不知道在哪里可以添加这个 css 代码宽度:60%;对于这个下拉列表
您可以使用 material-ui 库的 createMuiTheme
设置这些元素的样式:
const theme = createMuiTheme({
overrides: {
MuiTableRow: {
root: {
"&[mode=add]": {
"& .MuiInputBase-root": {
width: "90%",
background: '#dedede',
}
}
}
}
}
});
当您需要在特定单元格中设置特定输入的样式时,问题就出现了,因为您无法控制该元素的 style/props。
该解决方案非常丑陋,但我找不到更好的解决方案(至少对于版本 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
我想在 reactjs
的 Materialtable 中增加下拉列表 "Birth Place"我想要这样的东西,但我不知道在哪里可以添加这个 css 代码宽度:60%;对于这个下拉列表
您可以使用 material-ui 库的 createMuiTheme
设置这些元素的样式:
const theme = createMuiTheme({
overrides: {
MuiTableRow: {
root: {
"&[mode=add]": {
"& .MuiInputBase-root": {
width: "90%",
background: '#dedede',
}
}
}
}
}
});
当您需要在特定单元格中设置特定输入的样式时,问题就出现了,因为您无法控制该元素的 style/props。
该解决方案非常丑陋,但我找不到更好的解决方案(至少对于版本 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