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

时间:2018-10-21 00:28:22

标签: reactjs material-ui jss

我似乎无法弄清楚如何更改轮廓变体的轮廓颜色 我环顾了GitHub问题,人们似乎指向使用“ InputProps”属性,但这似乎无济于事。 This is the field 这是我的当前状态的代码

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

14 个答案:

答案 0 :(得分:10)

看看这个,我做了一个快速演示:

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

答案 1 :(得分:5)

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

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

我花了很长时间才弄清楚。希望对别人有帮助。

答案 2 :(得分:4)

使用此选项覆盖CSS属性

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

答案 3 :(得分: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"
            />

enter image description here

答案 4 :(得分:3)

  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外部的样式...

答案 5 :(得分:1)

扩展了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

答案 6 :(得分:1)

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

答案 7 :(得分:1)

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

因此,对于这个问题,您必须搜索自己的组件,因为它们的名称不同。

答案 8 :(得分:1)

“文本框”边框的问题是您要设置的颜色 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发明以来,这是唯一的解决方案,因此被视为可以接受的

答案 9 :(得分:1)

我就是这样解决的。

我想在聚焦时更改 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>
)
}

答案 10 :(得分:0)

由于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.

答案 11 :(得分:0)

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

答案 12 :(得分:0)

你可以参考这个代码:

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 的边框颜色。

答案 13 :(得分:0)

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

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