使用 React material-ui 更改 OutlinedInput 的大纲

Posted 2023-03-06

【中文标题】使用 React material-ui 更改 OutlinedInput 的大纲

【英文标题】：Change outline for OutlinedInput with React material-ui

【发布时间】：2019-06-16 23:08:59

【问题描述】：

快速说明：这不是 How to change outline color of Material UI React input component? 的重复项

使用 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>
          />

如您所见，图像的颜色为绿色，但仍有轮廓。即使在 CSS 中 outlineWidth 为 0 并且 outline 设置为 none。如何更改/禁用此大纲？

【参考方案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 的“轮廓”通过嵌套在其中的NotchedOutline 组件上的border 进行控制。为了影响该嵌套元素，您需要定义一个“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);

【参考方案2】：

你可以像这样使用内联样式：

<MyComponent style=outline: 'none' />

【参考方案3】：

2.4.7 焦点可见：任何可通过键盘操作的用户界面都具有键盘焦点指示器可见的操作模式。 （AA级）

https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-navigation-mechanisms-focus-visible

【参考方案4】：

OutlinedInput 的设计方式是您无法关闭其轮廓，您必须使用 TextField 和 variant 'outlined' 作为默认值，'none' 作为焦点。 可以看到Outlined Input Adornments的例子使用TextFieldhere