相关疑难解决方法(0)

我需要自定义 material-ui 自动完成控件，所以它不是那么高。我发现一个示例可以很好地使用自动完成文本字段上的 createMuiTheme 更改 MuiOutlinedInput 轮廓颜色。代码沙盒在这里：代码示例

这是我的主题覆盖代码，我为输入类的填充添加了一个覆盖：

const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "green"
        },
        "&:hover $notchedOutline": {
          borderColor: "red"
        },
        "&$focused $notchedOutline": {
          borderColor: "purple"
        },
        "& $input": {
          padding: "1px"
        }
      }
    }
  }
});

这是组件代码：

 <Autocomplete
  id="country-select-demo"
  style={{ width: 300 }}
  options={countries}
  getOptionLabel={option => option.label}
  renderInput={params => (
    <MuiThemeProvider theme={theme}>
      <TextField {...params} label={"Countries"} variant="outlined" />
    </MuiThemeProvider>
  )}
/>

问题是我对输入类的填充被这个覆盖了：

.MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input

我可以做些什么来使我的自定义不被上述覆盖？除了 createMuiTheme 之外，我还对其他技术持开放态度，或者对自动完成的其他部分进行样式设置。我只需要让它不那么高。

谢谢！

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

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

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

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

我正在使用Material-UI Autcomplete组件（免费单人版）并且一切正常，直到我尝试更改文本的颜色（在TextField.

我的代码如下所示：

const moreClasses = {
    label: { style: { color: 'blue' } },
    input: {
        style: {
            color: 'red',
            borderBottom: `1px solid green`
        }
    }
};
//...
<Autocomplete
    //... classic props as in the official Doc
    renderInput={params => <TextField 
        {...params} 
        label={'label'} 
        InputLabelProps={moreClasses.label}
        InputProps={moreClasses.input} />
/>

预期行为

当您开始输入时，您可以看到自动完成功能，并且您输入的文本应为红色。

实际行为

文本颜色为红色，但自动完成功能不再起作用。

我创建了这个实时运行示例来说明 3 个组件的问题：

• 仅文本字段（有效）

• 使用InputProps（作品）不改变颜色的自动完成

• 使用更改颜色的自动完成InputProps（不起作用）

笔记

通过设置InputLabelProps自动完成继续工作并更改标签的颜色（在我分享的示例中为蓝色）！所以我无法弄清楚为什么它在设置时不起作用InputProps。

关于这个问题的任何反馈？

当涉及到着色元素时，我在 Material-UI 中的主题方面遇到了一些困难。某些元素会自动选择“theme.palette.main.dark”。我想知道如何强迫他们不要这样做。

例如 TextField 和 SpeedDial 组件会自动从主题中选择 dark 属性。我试图只删除 dark 属性，但 TextField 是黑色的，并且 TextField 内的文本不可读。

我的主题文件配置如下：

import {createMuiTheme} from "@material-ui/core";
import {green, indigo, red} from "@material-ui/core/colors";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: indigo.A200,
      dark: green.A100
    },
    white: {
      text: '#fff',
    },
    secondary: {
      main: red.A100,
      dark: green.A100,
    }
  }
});

export default theme;

我希望 TextField 和 SpeedDial 选择原色，但实际结果是他们选择了 dark 属性，可能是因为否则会干扰人们无法正确看到组件，但我想自定义选择颜色。我一直无法找到有关如何更改 TextField 组件中下划线和浮动的颜色的解释。

https://codesandbox.io/s/material-demo-o52c8