Изменить схему для OutlinedInput с помощью React material-ui

Question

Краткое примечание: это не дубликат Как изменить цвет контура входного компонента React материала 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.Как я могу изменить / отключить эту схему?

Answer 1

Ключ к пониманию того, как переопределить эти стили, - посмотреть, как они определены в исходном коде Material-UI.На вопрос, на который вы ссылались, также показан необходимый синтаксис.

Ниже приведена сокращенная версия (я исключил стили, не связанные с контуром) стилей из OutlinedInput.js :

export const styles = theme => {
  const borderColor =
    theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';

  return {
    /* Styles applied to the root element. */
    root: {
      position: 'relative',
      '& $notchedOutline': {
        borderColor,
      },
      '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
        borderColor: theme.palette.text.primary,
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          borderColor,
        },
      },
      '&$focused $notchedOutline': {
        borderColor: theme.palette.primary.main,
        borderWidth: 2,
      },
      '&$error $notchedOutline': {
        borderColor: theme.palette.error.main,
      },
      '&$disabled $notchedOutline': {
        borderColor: theme.palette.action.disabled,
      },
    },
    /* Styles applied to the root element if the component is focused. */
    focused: {},
    /* Styles applied to the root element if `disabled={true}`. */
    disabled: {},
    /* Styles applied to the root element if `error={true}`. */
    error: {},
    /* Styles applied to the `NotchedOutline` element. */
    notchedOutline: {}

  };
};

"Контур" OutlinedInput управляется с помощью border компонента NotchedOutline , вложенного в него.Чтобы воздействовать на этот вложенный элемент, вам нужно определить класс «notchedOutline» (даже если он пустой), который вы затем сможете использовать для нацеливания этого элемента на различные состояния (например, в фокусе, наведение) родительского элемента.

Вот пример, который полностью удаляет границу:

import React from "react";
import ReactDOM from "react-dom";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputAdornment from "@material-ui/core/InputAdornment";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  root: {
    "& $notchedOutline": {
      borderWidth: 0
    },
    "&:hover $notchedOutline": {
      borderWidth: 0
    },
    "&$focused $notchedOutline": {
      borderWidth: 0
    }
  },
  focused: {},
  notchedOutline: {}
});
function App(props) {
  const { classes } = props;
  return (
    <div className="App">
      <OutlinedInput
        disableUnderline={true}
        notched={true}
        id="adornment-weight"
        classes={classes}
        value={1}
        endAdornment={<InputAdornment sposition="end">BTC</InputAdornment>}
      />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

Answer 2

OutlinedInput задано таким образом, что вы не можете отключить его контур, вы должны использовать TextField с variant 'контурным' по умолчанию и 'нет' в фокусе. Вы можете увидеть пример Outlined Input Adornments, используя TextField здесь