Question

我想使选择列表在水平方向上可滚动，因为文本太长并且用户无法完全看到它

我看到，如果我更改overflow中的MuiTouchRipple-root css属性，那么我可以成功实现它，但是我无法通过访问该属性来覆盖此属性

我检查了组件<MenuItem>的文档，似乎无法访问MuiTouchRipple，我想我必须绕过<ListItem>，但是我不想使用它

这是我将在其中应用选择字段的一个示例（我不认为每个状态的值都很重要，因此我没有提出它），然后您可以看到我通常如何更改组件的样式


     <TextField
        id="outlined-select-currency"
        select
        disabled={this.state.isDisablePhone}
        label={msg}
        className="telecom_phone-list"
        value={this.state.phone_selected}
        name="phone_selected"
        onChange={this.handleChange}
        SelectProps={{
          MenuProps: {
            className: classes.menu,
          },
        }}
        margin="normal"
        InputProps={{ classes: { root: classes.root, notchedOutline: classes.input } }}
        variant="outlined"
       >
        <MenuItem value={'none'} classes={{ root: classes.root }}Choose your phone></MenuItem>
        {this.state.res_list.map((data, key) => (
           <MenuItem classes={{ root: classes.root }} key={key} value={data}>
             {data.product_name} - {data.search_price} €
           </MenuItem>
        ))}
      </TextField>

谢谢

Answer 1

要覆盖MuiTouchRipple，可以使用此方法。

TouchRippleProps={{ classes: { child: 'my-class' }}}

希望这会有所帮助

如何覆盖MuiTouchRipple-root CSS

1 个答案: