如何更改 MUI TextField 的边框颜色

Question

我似乎不知道如何更改轮廓变体的轮廓颜色TextField

我环顾了 GitHub 个问题，人们似乎指向使用 TextField“InputProps”属性，但这似乎没有任何作用。

这是我当前状态下的代码

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import PropTypes from 'prop-types';

const styles = theme => ({
  field: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    height: '30px !important'
  },
});

class _Field extends React.Component {
      render() {
          const { classes, fieldProps } = this.props;
             return (
                <TextField
                {...fieldProps}
                label={this.props.label || "<Un-labeled>"}
                InputLabelProps={{ shrink: true }} // stop from animating.
                inputProps={{ className: classes.fieldInput }}
                className={classes.field}
                margin="dense"
               variant="outlined"
            />
        );
    }
}

_Field.propTypes = {
    label: PropTypes.string,
    fieldProps: PropTypes.object,
    classes: PropTypes.object.isRequired
}

export default withStyles(styles)(_Field);

Answer 1

由于 classes 属性，您可以覆盖 Material-UI 注入的所有 class 名称。查看 overriding with classes section and the implementation of the component 了解更多详情。

最后：

The API documentation of the Input React component. Learn more about the properties and the CSS customization points.

Answer 2

看看这个，我做了一个快速演示：

https://stackblitz.com/edit/material-ui-custom-outline-color

它更改 Material-UI TextField 的默认边框颜色和标签颜色，但在聚焦时保持原色。

此外，看看这个 link，它给了我“想法”：

https://github.com/mui-org/material-ui/issues/13347

如果您想在聚焦时更改颜色，请查看文档中的这些示例：

https://mui.com/components/text-fields/#customization

Answer 3

const styles = theme => ({
  notchedOutline: {
    borderWidth: "1px",
    borderColor: "yellow !important"
  }
});

 <TextField
              variant="outlined"
              rows="10"
              fullWidth
              InputProps={{
                classes: {
                  notchedOutline: classes.notchedOutline
                }
              }}
              id="standard-textarea"
              label="Input Set"
              helperText="Enter an array with elemets seperated by , or enter a JSON object"
              placeholder="Placeholder"
              multiline
              value={"" + this.props.input}
              onChange={this.props.handleChangeValue("input")}
              className={classes.textField}
              margin="normal"
            />

Answer 4

扩展彼得的。您也可以在不使用 !important:

的情况下更改所有事件颜色

 cssOutlinedInput: {
        "&:not(hover):not($disabled):not($cssFocused):not($error) $notchedOutline": {
          borderColor: "red" //default      
        },
        "&:hover:not($disabled):not($cssFocused):not($error) $notchedOutline": {
          borderColor: "blue" //hovered
        },
        "&$cssFocused $notchedOutline": {
          borderColor: "purple" //focused
        }
      },
      notchedOutline: {},
      cssFocused: {},
      error: {},
      disabled: {}

https://stackblitz.com/edit/material-ui-custom-outline-color-c6zqxp

Answer 5

https://codesandbox.io/s/6rx8p

                      <CssTextField      

                       label="Username"

                       className="username"
                       name="username"
                       onChange={this.onChange}
                       type="text"
                       autoComplete="current-password"
                       margin="normal"
                       inputProps={{ style: { fontFamily: 'nunito', color: 'white'}}}

                    />

//声明const并添加material UI样式

const CssTextField = withStyles({
  root: {
    '& label.Mui-focused': {
      color: 'white',
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: 'yellow',
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'white',
      },
      '&:hover fieldset': {
        borderColor: 'white',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'yellow',
      },
    },
  },
})(TextField);

Answer 6

  inputProps={{ style: { fontFamily: 'nunito', color: 'white'}}}

Inputprops 通过在文本字段中输入输入数据设置样式来工作，我们也可以使用 className 进行自定义着色..

      const CssTextField = withStyles({
     root: {
    '& label.Mui-focused': {
     color: 'white',
      },
     '& .MuiInput-underline:after': {
      borderBottomColor: 'yellow',
     },
    '& .MuiOutlinedInput-root': {
     '& fieldset': {
     borderColor: 'white',
     },
     '&:hover fieldset': {
      borderColor: 'white',
       },
     '&.Mui-focused fieldset': {
       borderColor: 'yellow',
     },
     },
    },

此 const 样式适用于文本字段的外部部分...

material UI 的外部样式上面要求更改...

Answer 7

The overrides key enables you to customize the appearance of all instances of a component type,... Material-Ui

在这种情况下有一个简短的答案，你必须使用 ThemeProvider 和 createMuiTheme

import React from 'react';
import {
  createMuiTheme,
  ThemeProvider
} from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff5722' //your color
    }
  }
});

function CustomTextfield(props) {
  return (
    <ThemeProvider theme={theme}>
      <TextField variant='outlined'/>
    </ThemeProvider>
  );
}

要进行更完整的自定义，您可以使用默认主题名称 pallete。如果您不知道名称或命名约定在哪里。在样式部分使用浏览器检查器是你的救星，你可以注意到 css 链是如何在 material-ui.

中制作的

.MuiFilledInput-root {
position: relative;
transition: background-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
background-color: rgba(255,255,255,0.8);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

MuiFilledInput > root > background-color:

我们必须使用来自检查器的数据创建主题，我们只需将链置于覆盖中：{}

const theme = createMuiTheme({
  overrides: {
    MuiFilledInput: {
      root: {
        backgroundColor: 'rgba(255,255,255,0.8)',
        '&:hover': {
          backgroundColor: 'rgba(255,255,255,1)'
        },
        '&.Mui-focused': {
          backgroundColor: 'rgba(255,255,255,1)'
        }
      }
    }
  }
});

现在您可以使用 ThemeProvider 进行覆盖

import {
  createMuiTheme,
  ThemeProvider
} from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiFilledInput: {
      root: {
        backgroundColor: 'rgba(255,255,255,0.8)',
        '&:hover': {
          backgroundColor: 'rgba(255,255,255,1)'
        },
        '&.Mui-focused': {
          backgroundColor: 'rgba(255,255,255,1)'
        }
      }
    }
  }
});

function CustomTextfield(props) {
  return (
    <ThemeProvider theme={theme}>
      <TextField variant='filled' />
    </ThemeProvider>
  );
}

所以这个问题你必须自己搜索组件，因为名称不同。

Answer 8

万一有人想用样式组件来做这个：

import styled from "styled-components";
import {TextField} from "@material-ui/core";

const WhiteBorderTextField = styled(TextField)`
  & label.Mui-focused {
    color: white;
  }
  & .MuiOutlinedInput-root {
    &.Mui-focused fieldset {
      border-color: white;
    }
  }
`;

我花了很长时间才弄明白。希望对大家有帮助。

Answer 9

使用这个覆盖 CSS 属性

.MuiFormLabel-root.Mui-focused {
  color: red !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: red !important;
}

Answer 10

Textfield 边框的问题是您要设置的颜色比 Material-UI (MUI) 设置的原始样式低 specificity。

例如MUI 在聚焦时设置此 class：

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: (some color);
}

这比自定义选择器更具体，例如：

.Component-cssNotchedOutline {
    border-color: #f0f;
}

方案一（不推荐）

您可以在颜色中添加 !important 例外，但这是 'bad practice':

import React from 'react';
import { createStyles, TextField, WithStyles, withStyles } from '@material-ui/core';
interface IProps extends WithStyles<typeof styles> {}

const styles = createStyles({
    notchedOutline: { borderColor: '#f0f !important' },
});

export const TryMuiA = withStyles(styles)((props: IProps) => {
    const { classes } = props;
    return ( <TextField variant={ 'outlined' } label={ 'my label' }
        InputProps={ {
            classes: {
                notchedOutline: classes.notchedOutline,
            },
        } }
    /> );
});

方案 B （推荐）

official MUI example 使用其他方法来提高特异性。

'trick'是不直接给元素设置样式，比如：

.someChildElement { border-color: #f0f }

但要添加一些额外的选择器（比 MUI 多*），例如：

.myRootElement.someExtra { border-color: #f0f }
.myRootElement .someChildElement { border-color: #f0f }
...

*(其实用MUI一样的选择器就够了, 因为如果选择器的特异性相同，然后使用 'later' 个）

包括 parent: 您可能已经注意到设置 notchedOutline 确实设置了颜色un-focused 元素，但不为重点。那是因为MUI样式包含了输入框的parent元素（.MuiOutlinedInput-root.Mui-focused）。所以你还需要包括 parent。

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = {
    root: {                           // - The TextField-root
        border: 'solid 3px #0ff',     // - For demonstration: set the TextField-root border
        padding: '3px',               // - Make the border more distinguishable

        // (Note: space or no space after `&` matters. See SASS "parent selector".)
        '& .MuiOutlinedInput-root': {  // - The Input-root, inside the TextField-root
            '& fieldset': {            // - The <fieldset> inside the Input-root
                borderColor: 'pink',   // - Set the Input border
            },
            '&:hover fieldset': {
                borderColor: 'yellow', // - Set the Input border when parent has :hover
            },
            '&.Mui-focused fieldset': { // - Set the Input border when parent is focused 
                borderColor: 'green',
            },
        },
    },
};

export const TryMui = withStyles(styles)(function(props) {
    const { classes } = props;
    return (<TextField label="my label" variant="outlined"
        classes={ classes }
    />);
})

注意您可以通过不同的方式提高特异性，例如这也可以（有点不同）：

    '& fieldset.MuiOutlinedInput-notchedOutline': {
        borderColor: 'green',
    },

备注：添加选择器只是为了增加特异性，似乎有点'dirty'，当你真的不 'need' 他们的时候。我认为是的，但这种解决方法有时是自 CSS 发明以来的唯一解决方案，因此被认为是 种可接受的 。

Answer 11

你可以参考这段代码：

styles.js

cssLabel: {
  color : 'rgb(61, 158, 116) !important'
}, 
notchedOutline: {
  borderWidth: '1px',
  borderColor: 'rgb(61, 158, 116) !important',
  color: 'rgb(61, 158, 116)',
},

form.js

<TextField
                name="creator"
                focused="true" 
                variant="outlined" 
                label="Creator"  
                fullwidth
                InputLabelProps={{
                    classes: {
                      root: classes.cssLabel,
                      focused: classes.cssLabel,
                    },
                }}
                InputProps={{
                    classes: {
                      root: classes.notchedOutline,
                      focused: classes.notchedOutline,
                      notchedOutline: classes.notchedOutline,
                    },
                    
                 }}
               
 />

基本上，您需要适当地设置 InputProps 的 notchedOutline 的边框颜色。

Answer 12

这里是 select 输入的示例：

import {
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  OutlinedInput as MuiOutlinedInput,
} from "@material-ui/core";
    
const OutlinedInput = withStyles((theme) => ({
  notchedOutline: {
    borderColor: "white !important",
  },
}))(MuiOutlinedInput);

const useStyles = makeStyles((theme) => ({
  select: {
    color: "white",
  },
  icon: { color: "white" },
  label: { color: "white" },
}));

function Component() {
  return (
    <FormControl variant="outlined">
      <InputLabel id="labelId" className={classes.label}>
        Label
      </InputLabel>
      <Select
        labelId="labelId"
        classes={{
          select: classes.select,
          icon: classes.icon,
        }}
        input={<OutlinedInput label="Label" />}
      >
        <MenuItem>A</MenuItem>
        <MenuItem>B</MenuItem>
      </Select>
    </FormControl>
  );
}

Answer 13

我就是这样解决的。

我想在聚焦时更改 TextField 的颜色。如您所知，material Ui textField 在聚焦时的默认颜色是蓝色。蓝色为主色。

所以这里是黑客，我去了外部组件App，然后定义了一个名为createMuiTheme的函数。这会 returns 一个叫做 pallete 的对象。在托盘内部是您提供颜色覆盖的地方。您将使用 materia ui 中的 ThemeProvider 将新定义的颜色主题应用于您的应用，如下所示。如需更多说明，请遵循此 link https://material-ui.com/customization/palette/

import {createMuiTheme, ThemeProvider} from '@material-ui/core';
import FormInput from './FormInput';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "your own color", //this overide blue color
      light: "your own color", //overides light blue
      dark: "your own color", //overides dark blue color
    },
  },
});


//apply your new color theme to your app component
function App(){
return(
<ThemeProvider theme={theme}> //applies custom theme
   <FormInput/>
</ThemeProvider>
)
}

Answer 14

下面是使用 MUI v5 中的 styled() 自定义其边框颜色的代码。结果 TextField 有一个额外的 borderColor 道具，可以让你传递任何你想要的颜色，而不仅仅是来自 MUI 调色板的颜色。

import { styled } from '@mui/material/styles';
import MuiTextField from '@mui/material/TextField';

const options = {
  shouldForwardProp: (prop) => prop !== 'borderColor',
};
const outlinedSelectors = [
  '& .MuiOutlinedInput-notchedOutline',
  '&:hover .MuiOutlinedInput-notchedOutline',
  '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline',
];
const TextField = styled(
  MuiTextField,
  options,
)(({ borderColor }) => ({
  '& label.Mui-focused': {
    color: borderColor,
  },
  [outlinedSelectors.join(',')]: {
    borderWidth: 3,
    borderColor,
  },
}));

用法

<TextField label="green" borderColor="green" />
<TextField label="red" borderColor="red" />
<TextField label="blue" borderColor="blue" />

Answer 15

在 MUI V5 中：

const theme = createTheme({
    
     components: {
        MuiInputBase: {
          styleOverrides: {
            root: {
              "&:before":{
                borderBottom:"1px solid yellow !imporatnt",}
            },
          },
        },
      },
    
    })

Answer 16

对于最新的 MUI v5.2.2：改变TextField颜色属性主要有两种方式：

第一个是使用 InputProps 和 InputLabelProps：首先你可以创建一个 some.module.css 文件，你可以在其中创建你的类:

.input-border {
    border-color: #3E68A8 !important;
}

.inputLabel {
    color: #3E68A8 !important;
}

.helper-text {
    text-transform: initial;
    font-size: 1rem !important;
}

之后你可以像这样应用它们：

            <TextField
              sx={{
                textTransform: 'uppercase',
              }}
              FormHelperTextProps={{
                classes: {
                  root: classes['helper-text'],
                },
              }}
              InputProps={{
                classes: {
                  notchedOutline: classes['input-border'],
                },
              }}
              InputLabelProps={{
                classes: {
                  root: classes.inputLabel,
                  focused: classes.inputLabel,
                },
              }}
            />

请注意，上面还显示了如何更改 FormHelperText 的颜色！

但如果您有多个输入字段，最好的方法是使用 @mui/material/styles

中的 createTheme 覆盖您需要的组件

下面的例子显示了一些组件，其余的你可以在开发工具中检查，稍后在主题文件中只需 Ctrl + Space 就会显示所有可用的组件。示例：

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

const theme = createTheme({
  components: {
    // CTRL + SPACE to find the component you would like to override.
    // For most of them you will need to adjust just the root...
    MuiTextField: {
      styleOverrides: {
        root: {
          '& label': {
            color: '#3E68A8',
          },
          '& label.Mui-focused': {
            color: '#3E68A8',
          },
          '& .MuiInput-underline:after': {
            borderBottomColor: '#3E68A8',
          },
          '& .MuiOutlinedInput-root': {
            '& fieldset': {
              borderColor: '#3E68A8',
            },
            '&:hover fieldset': {
              borderColor: '#3E68A8',
              borderWidth: '0.15rem',
            },
            '&.Mui-focused fieldset': {
              borderColor: '#3E68A8',
            },
          },
        },
      },
    },
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          textTransform: 'initial',
          fontSize: '1rem',
        },
      },
    },
  },
});

export default responsiveFontSizes(theme);

Answer 17

您可以像下面那样覆盖此样式

/* for change border color*/
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{
    border-color: #5EA841 !important;
}

/*for change label color in focus state*/
.MuiFormLabel-root.Mui-focused{
    color: #212121 !important;
}

Answer 18

下面是我如何处理 TextField 组件的悬停和聚焦状态。

MuiTextField: {
  styleOverrides: {
    root: {
      "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
        borderColor: "#ffb535",
      },
      "& .MuiOutlinedInput-root.Mui-focused  .MuiOutlinedInput-notchedOutline":
        {
          borderColor: "#ffb535",
        },
    },
  },
},

Answer 19

对我来说，我不得不使用纯粹的 css ：

.mdc-text-field--focused .mdc-floating-label {
  color: #cfd8dc !important;
}
.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: #cfd8dc !important;
}

// optional caret color
.mdc-text-field--focused .mdc-text-field__input {
  caret-color: #cfd8dc !important;
}

J

如何更改 MUI TextField 的边框颜色

How to change the border color of MUI TextField

reactjs

material-ui

jss

方案一（不推荐）

方案 B （推荐）

用法