我需要在我的反應材料的輸入庫中放一個邊框顏色。我試著做下面的代碼，它仍然沒有出現。

我準備了一個codesandbox鏈接

密碼

import palette from "../palette";

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

如果您看到控制臺，則特異性有問題。所以一定要把焦點的樣式放在根里面

工作演示

重構代碼

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 for InputBase。

工作演示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" }}
      />

代碼沙箱鏈接中的index.js文件中缺少對MuiInputBase的導入。另外，您對MUIInputBase的css設置是不正確的。在添加borderColor和borderWidth之前，應該將css對象包裝在輸入容器中并設置border屬性。

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