相关疑难解决方法(0)

快速说明：这不是如何更改 Material UI React 输入组件的轮廓颜色的副本？

使用 material-ui (React) 我无法删除悬停或聚焦时的轮廓。我使用这个输入的原因是在出现警告时请求添加一个小的红色边框。我可以更改聚焦和悬停样式。这在下图中进行了测试：

输入焦点时应用此 CSS 的位置：

outlinedInputFocused: {
     borderStyle: 'none',
     borderColor: 'red',
     outlineWidth: 0,
     outline: 'none',
     backgroundColor: 'green'
  },

成分

 <OutlinedInput
            disableUnderline={true}
            notched={true}
            id="adornment-weight"
            classes={{root: classes.outlinedInput, focused: classes.outlinedInputFocused}}
            value={this.state.budgetValue}
            onChange={evt => this.updateBudgetValue(evt)}
            onKeyPress={evt => this.handleKeyPress(evt)}
            endAdornment={<InputAdornment sposition="end">BTC</InputAdornment>}
          />

如您所见，图像的颜色为绿色，但仍有轮廓。即使outlineWidth 为0 并且在CSS 中将outline 设置为none。如何更改/禁用此大纲？

这应该很简单，但由于某种原因，我无法弄清楚如何更改 TextField 上的边框颜色

<TextField style={{ borderColor: 'white', width: '100px' }} variant="outlined" />

它基本上只是从文档中复制出来的，轮廓上是白色的，所以我无法弄清楚到底是什么把它搞砸了。

我试图在 jsfiddle 或其他东西上重现，但找不到可以让我导入 TextField 模块的

我从材料 ui 版本 3 升级到 4 并想覆盖： .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline

因为我认为这个更新引入了改变我当前用户界面的悬停状态。

我使用了 createMuiTheme()

并尝试了以下但没有一个工作：

MuiOutlinedInput: {
    root: {
        '&:hover': {
            '&$notchedOutline': {
                borderColor: '#f00',
            }
        },
    },
}


MuiOutlinedInput: {
    root: {
        '&$hover $notchedOutline': {
            borderColor: '#f00',
        },
    },
}

我做错了什么，希望有人能帮忙

我可以通过什么方式覆盖全局主题，以便所有使用变体 = 'outlined' 的组件都受该样式的影响。还想覆盖焦点、悬停等事件。

 "@material-ui/core": "^3.9.2",