如何使用 MaterialUI 中的 withStyle 通过另一个元素选择器更改元素的样式

Question

我有一个输入，我想在关注输入时更改父 div 的边框。
https://codesandbox.io/s/jolly-fermat-e2tyo?file=/src/App.js

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

const InputComponent = ({ value, classes }) => (
  <div className={classes.inputContainer}>
    <input value={value} className={classes.input} />
  </div>
);

const styles = {
  input: {
    fontSize: 14,
    padding: 15,
    "&:focus": {
      backgroundColor: "#F8F8F8",
      $inputContainer: {
        //I know this won't work
        border: "1px solid #006CFF"
      }
    }
  },
  inputContainer: {
    border: "1px solid black",
    backgroundColor: "white"
  }
};

const InputWithStyles = withStyles(styles)(InputComponent);

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <InputWithStyles />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

目前正在使用material-ui中的withStyles HOC，并使用组件上的classes props

使用的版本：“@material-ui/core”：“^3.9.2”

Answer 1

简短的回答是这在 CSS 中是不可能的（参见 Is there a CSS parent selector?）。

实现预期结果的方法是通过 JavaScript 更改父类（例如添加/删除“焦点”类）以响应焦点/模糊事件。这是 Material-UI 在内部用于更改输入容器样式的方法（请参阅 https://github.com/mui-org/material-ui/blob/v4.9.14/packages/material-ui/src/InputBase/InputBase.js#L414）。

这是使用此方法的沙盒的修改版本：

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

const InputComponent = ({ value, classes }) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <div
      className={classnames(classes.inputContainer, {
        [classes.focused]: focused
      })}
    >
      <input
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        value={value}
        className={classes.input}
      />
    </div>
  );
};

const styles = {
  input: {
    fontSize: 14,
    padding: 15,
    "&:focus": {
      backgroundColor: "#F8F8F8"
    }
  },
  inputContainer: {
    border: "1px solid black",
    backgroundColor: "white",
    "&$focused": {
      border: "1px solid #006CFF"
    }
  },
  focused: {}
};

const InputWithStyles = withStyles(styles)(InputComponent);

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <InputWithStyles />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我期待看到您使用 Material-UI 输入组件之一的示例。如果您实际上正在使用其中之一并在示例中为简单起见将其删除，请告诉我。 Material-UI 输入的处理方式会有所不同——Material-UI 已经在管理聚焦状态的知识，因此通常不需要重复该工作。相反，您只需利用 Material-UI 已经添加到输入容器的类。