相关疑难解决方法(0)

我们想更改 Material-ui 自动完成组件上的文本颜色、轮廓和填充。

代码如下所示：

              <FormControlLabel
                label="Please enter desired service:"
                labelPlacement="start"
                control={
                  <Autocomplete
                    id="services"
                    options={props.serviceTypes}
                    getOptionLabel={option => option.name}
                    className={classes.inputRoot}
                    style={{ width: 400, paddingLeft: 20 }}
                    renderInput={params => (
                      <TextField
                        {...params}
                        label=""
                        className={classes.inputRoot}
                        variant="outlined"
                        fullWidth
                      />
                    )}
                    onChange={setService}
                  />
                }
              />

我们可以通过这样的代码更改 TextInput 颜色

                        InputProps={{
                          className: classes.inputColor
                        }}

但是以这种方式应用样式会影响 AutoComplete 功能（它失去了自动完成功能并且表现得像一个普通的 TextField）。

我们尝试了许多 style 和 className 选项都无济于事。

感谢任何建议。

快速说明：这不是如何更改 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
  id="standard-with-placeholder"
  label="First Name"
  className={classes.textField}
  margin="normal"
/>

它看起来像这样：

但我希望它看起来像这样：

“名字”文本更大。如何调整标签文字大小？目前我的样式对象是空的。我认为这应该是做这件事的 CSS 应该去的地方，但我不确定标签文本的 css 会是什么样子。

谢谢

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

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

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

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

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

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