在Material Table中设计创建行输入元素的样式。

我想在reactjs的Materialtable中增加一个下拉列表 “出生地”。

enter image description here

我想要一些类似的东西,我不知道在哪里可以添加这个css代码宽度:60%;为这个下拉列表。

enter image description here

解决方案:

你可以用 createMuiTheme material-ui lib.中的styleprops。

const theme = createMuiTheme({
  overrides: {
    MuiTableRow: {
      root: {
        "&[mode=add]": {
          "& .MuiInputBase-root": {
            width: "90%",
            background: '#dedede',
          }
        }
      }
    }
  }
});

当你需要在特定的单元格中为特定的输入设置样式时,问题就开始了,因为你无法控制该元素的styleprops。这个解决方案非常丑陋,但我找不到更好的解决方案(至少在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.iosmaterial-table-style-create-row-cbpzk?file=demo.js。

给TA打赏
共{{data.count}}人
人已打赏
未分类

mapKit苹果。地名和用户没有焦点地图的错误。

2022-9-9 7:53:21

未分类

RxJS的行为不符合预期

2022-9-9 7:53:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索