React Material中InputBase中的边框颜色

Posted 2023-02-22

【中文标题】React Material中InputBase中的边框颜色

【英文标题】：Border Color in InputBase in React Material

【发布时间】：2020-11-09 08:27:35

【问题描述】：

我需要在我的反应材料中的InputBase 中添加一个borderColor。我试着做下面的代码，它仍然没有出现。

我准备了codesandbox link

代码

import palette from "../palette";

export default 
  focused: 
    borderColor: palette.primary.main,
    borderWidth: 10
  
;

【参考方案1】：

代码沙箱链接中的 index.js 文件中缺少您对 MuiInputBase 的导入。另外，您的 MUIInputBase 的 css 设置不正确。您应该将 css 对象包装在输入容器中，并在添加borderColor 和borderWidth 之前设置border 属性。

// Example setting
input 
     "&:focus": 
          border: "1px solid pink"
     

【讨论】：

嗨。我已经编辑过了。但我的问题出在focus

对于焦点，您可以在代码中使用“&:focus”css 选择器，就像对按钮所做的那样。我根据您的要求更新了答案

【参考方案2】：

如果您看到控制台，则说明特异性存在问题。所以一定要把focus的样式放在root里面

working demo

重构代码

  root: 
    border: "2px solid blue",
    "&$focused":  //<---- see here
      borderColor: palette.primary.main,
      // borderColor: 'green',
      borderWidth: 10
    
  
  // focused:  // this is wrong. Remove this block of code
  //   borderColor: palette.primary.main,
  //   borderWidth: 10
  // 
;

编辑：基于评论.....

如果你正常应用样式，那么你可以简单地在makeStyles中使用focused作为InputBase。

Working demo 2

const useStyles = makeStyles(theme => (
  root: 
    padding: "2px 18px",
    display: "flex",
    alignItems: "center",
    width: 400
  ,
  focused:  //<---- see here
    backgroundColor: "red",
    borderColor: "2px solid green",
    borderWidth: 10
  ,

用法

<InputBase
        classes= root: classes.root, focused: classes.focused 
        placeholder="Search Google Maps"
        inputProps= "aria-label": "search google maps" 
      />

【讨论】：

其实。我正在尝试在此 codesandbox.io/s/material-demo-8llxu?file=/demo.js

上执行此操作

我所说的边框颜色就像TextField。我正在尝试在 InputBase 中应用它