Question

我似乎无法弄清楚如何更改轮廓变体的轮廓颜色我环顾了GitHub问题，人们似乎指向使用“ 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

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

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

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

另外，看看这个链接，它给了我“想法”：

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

如果要在聚焦时更改颜色，请查看文档中的以下示例：

https://material-ui.com/demos/text-fields/#customized-inputs

Answer 2

万一有人想使用样式组件来做到这一点：

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 3

使用此选项覆盖CSS属性

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

Answer 4

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 5

  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样式可以使已归档文本的外部部分...

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

Answer 6

扩展了Peter的answer。您也可以更改所有事件的颜色，而无需使用!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 7

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并添加材料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 8

使用overrides键，可以自定义组件类型的所有实例的外观，... 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。如果您不知道名称或命名约定在哪里。使用样式部分中的浏览器检查器是您的救星，您会注意到在material-ui中如何制作CSS链。

.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>根>背景颜色：

我们必须使用检查器中的数据创建主题，我们只需要将链放置在替代中：{}

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 9

“文本框”边框的问题是您要设置的颜色 specificity比Material-UI（MUI）设置的原始样式要低。

例如MUI专注时设置此类：

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

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

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

解决方案A （不推荐）

您可以为颜色添加!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和许多教程使用其他方法来提高特异性。（多数情况下并没有解释，并且在所有情况下都不能按原样工作。）

“诀窍”是，不能直接对元素进行样式设置，例如：

.someChildElement { border-color: #f0f }

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

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

*（实际上，使用与MUI相同的选择器就足够了，因为如果选择器的特异性相同，然后使用“后来的”）

包括父项：您可能已经注意到，设置notchedOutline 确实设置了未聚焦元素的颜色，但未聚焦对象的颜色。这是因为MUI样式包含输入框（.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',
    },

备注：添加选择器只是为了增加特异性，似乎有点“肮脏”，当您真的不需要时。我认为是，但是这种解决方法有时是自CSS发明以来，这是唯一的解决方案，因此被视为可以接受的。

Answer 10

我就是这样解决的。

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

所以这里是 hack，我转到外部组件 App，然后定义了一个名为 createMuiTheme 的函数。此函数返回一个名为 Pallete 的对象。调色板内是您提供颜色覆盖的地方。您将使用 materia ui 中的 ThemeProvider 将新定义的颜色主题应用到您的应用程序，如下所示。如需更多说明，请点击此链接 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 11

由于classes属性，您可以覆盖Material-UI注入的所有类名称。请查看overriding with classes部分和implementation of the component以获得更多详细信息。

最后：

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

Answer 12

我的意思是Mui.TextField具有3种样式：标准，填充，轮廓。上述解决方案仅适用于轮廓样式

Answer 13

你可以参考这个代码：

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 14

这是一个选择输入的例子：

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>
  );
}

如何更改Material-UI <textfield>的边框颜色

14 个答案:

解决方案A （不推荐）

解决方案B （推荐）