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

Question

Краткое примечание: это не дубликат Как изменить цвет контура входного компонента React материала UI?

С помощью Material-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

Вы можете использовать встроенный стиль следующим образом:

<MyComponent style={{outline: 'none'}} />

Answer 3

2.4.7 Видимость фокуса. Любой пользовательский интерфейс, управляемый клавиатурой, имеет режим работы, в котором индикатор фокуса клавиатуры виден. (Уровень AA)

https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visiblehttps://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr -Навигационные-механизмы-фокус-видимый

Answer 4

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