相关疑难解决方法(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 选项都无济于事。

感谢任何建议。

我不知道为什么我不能让它工作。我正在选择MuiInputBase-root元素，告诉它选择字段并将边框颜色设置为蓝色，然后在焦点上将边框颜色设置为红色。我在这里做错了什么？

代码沙箱

import React from "react";
import "./styles.css";

import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";

const useStyles = makeStyles(theme => ({
  root: {
    width: "20rem"
  },
  label: {
    background: "white",
    paddingRight: theme.spacing(0.5),
    "&.Mui-focused": {
      color: theme.palette.secondary.main
    }
  },
  closeIcon: {
    color: theme.palette.grey[400],
    "&.hidden": {
      display: "none"
    }
  },
  searchIcon: {
    color: theme.palette.primary.main
  }
}));

const useOutlinedInputStyles = makeStyles({
  root: {
    "& .MuiInputBase-root": {
      "& fieldset": {
        borderColor: …

快速说明：这不是如何更改 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。如何更改/禁用此大纲？

我正在尝试更改 v4.13 MaterialUI Outlined Input的边框颜色。但是，在尝试覆盖 CSS 时，我没有任何工作。

我已经尝试将多个 CSS 规则应用于每个元素，select 和 OutlinedInput，下面的两个是最新的。我在这里做错了什么？

const styles = () =>
  createStyles({
    select: {
      "&:before": {
        borderColor: "red"
      },
      "&:after": {
        borderColor: "red"
      },
    },
    outline: {
      "&:before": {
        borderColor: "red"
      },
      "&:after": {
        borderColor: "red"
      },
    }
  });

   <Select
      label={label}
      fullWidth={true}
      error={touched && invalid}
      className={inputStyles}
      classes={{ root: classes.select }}
      input={
        <OutlinedInput
          {...input}
          fullWidth={true}
          id={input.name}
          labelWidth={this.state.labelWidth}
          classes={{notchedOutline: classes.outline}}
        />
      }
      {...custom}
    >
      {children}
    </Select>

我可以在这里看到设置边框颜色的位置，但无法覆盖它。

我正在尝试select从 Material-UI更改组件的边框。到目前为止，我已经尝试过：

const styles = theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    backgroundColor: "lightgrey"
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing.unit * 2
  },
  cssLabel: {
    color: "pink",
    "&$cssFocused": {
      color: "pink"
    }
  },
  cssFocused: {
    color: "pink"
  },
  underline: {
    "&:after": {
      borderBottom: "1px solid pink",
      borderTop: "1px solid pink"
    }
  }
});

我可以自定义TextField等，但经过很多小时后，我仍然无法自定义选择。我也尝试通过Input，但是您必须自定义Input，这更糟。

有人可以帮我处理这个沙箱吗？

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

我真的很感激。

当涉及到着色元素时，我在 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

我从材料 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",