Как изменить цвет границы Material-UI <TextField />

Вы можете переопределить все имена классов, введенные Material-UI, благодаря свойству classes. Взгляните на раздел переопределение с классами и реализация компонента для более подробной информации.

и наконец :

Документация API компонента Input React. Узнайте больше о свойствах и точках настройки CSS.

Взгляните на это, я сделал небольшую демонстрацию:

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

Он изменяет цвет границы по умолчанию и цвет метки TextField Material-UI, но сохраняет основной цвет при фокусировке.

Также взгляните на эту ссылку, она дала мне "идею":

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

Если вы хотите изменить цвет при фокусировке, посмотрите эти примеры из документации:

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

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.handleChangeEventValue("input")}
              className = {classes.textField}
              margin = "normal"
            />

Расширение отвечать Питера. Вы также можете изменить все цвета событий без !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

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

  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',
     },
     },
    },

Этот константный стиль работает с внешним видом текстового поля ...

Выше предлагается изменить стиль внешней части пользовательского интерфейса материала ...

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

Для более полной настройки вы можете использовать имена тем по умолчанию поддон. Если вы не знаете, где находятся имена или соглашения об именах. Использование инспектора браузера в разделе стилей - ваше спасение, вы можете заметить, как цепочка 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> корень> цвет фона:

нам нужно создать тему, используя данные из инспектора, нам нужно только поместить цепочку в переопределения: {}

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

Поэтому для этого вопроса вам нужно искать свои собственные компоненты, потому что они имеют разные имена.

Если кто-то хочет сделать это с помощью стилизованных компонентов:

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

Это заняло у меня слишком много времени, чтобы понять. Надеюсь, это кому-то поможет.

используйте это свойство переопределения CSS

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

Проблема с границей текстового поля заключается в том, что цвет, который вы хотите установить имеет более низкий специфичность, чем исходный стиль, установленный Material-UI (MUI).

Например. MUI устанавливает этот класс при фокусировке:

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

который более конкретен, чем пользовательский селектор, например:

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

Решение A (не рекомендуется)

Вы можете добавить в цвет исключение !important, но это 'плохая практика':

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 (рекомендуемые)

официальный пример MUI использует другие способы повышения специфичности.

«Уловка» в том, что, чтобы не стилизовать элемент напрямую, например:

.someChildElement { border-color: #f0f }

но добавить несколько дополнительных селекторов (больше, чем в MUI *), например:

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

* (Собственно достаточно использовать те же селекторы, что и MUI, потому что, если специфика селекторов одинакова, затем используются более поздние)

Включите родителя: Вы могли заметить, что настройка notchedOutlineделает устанавливает цвет для несфокусированного элемента, но не для сфокусированного. Это потому, что стиль MUI включает в себя элемент родитель поля ввода (.MuiOutlinedInput-root.Mui-focused). Так что вам нужно также включить родителя.

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, поэтому он считается вроде приемлемый.

вы можете сослаться на этот код:

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,
                    },
                    
                 }}
               
 />

в основном, вам нужно правильно установить цвет границы notchedOutline для InputProps.

Вот этот пример на выбранном входе:

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

Вот как я решил свою.

Я хотел изменить цвет текстового поля при включении. Как вы уже знаете, цвет текстового поля по умолчанию для материала Ui, когда он находится в фокусе, является синим. Синий - основной цвет.

Итак, вот хак, я перешел к внешнему компоненту App, а затем определил функцию под названием createMuiTheme. Эта функция возвращает объект под названием палитра. Внутри палитры вы указываете свой цвет. Вы будете использовать ThemeProvider из materia ui, чтобы применить новую определенную цветовую тему к вашему приложению, как показано ниже. Для получения дополнительной информации перейдите по этой ссылке 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>
)
}