如何通过Material-UI的withStyles实现输入框聚焦时修改父容器边框样式

嘿，我明白你想实现的效果——当输入框获得焦点时，让它的父容器边框变色。你之前的写法行不通，核心原因是CSS本身没有原生的“子元素触发父元素样式”的选择器，JSS里的$inputContainer类名引用只能从父级向下作用，没法反过来从子元素指向父元素。

下面给你两种可行的解决方案：

方案一：用React状态跟踪焦点（兼容性拉满） #

通过React的状态来管理输入框的聚焦状态，动态给父容器切换样式类，这种方法能兼容所有浏览器：

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

const InputComponent = ({ value, classes }) => {
  // 用state记录输入框是否处于聚焦状态
  const [isFocused, setIsFocused] = useState(false);

  return (
    <div 
      className={`${classes.inputContainer} ${isFocused ? classes.inputContainerFocused : ''}`}
    >
      <input 
        value={value} 
        className={classes.input}
        // 聚焦时更新状态
        onFocus={() => setIsFocused(true)}
        // 失焦时重置状态
        onBlur={() => setIsFocused(false)}
      />
    </div>
  );
};

const styles = {
  input: {
    fontSize: 14,
    padding: 15,
    "&:focus": {
      backgroundColor: "#F8F8F8",
      outline: "none" // 去掉默认聚焦边框，避免和自定义样式冲突
    }
  },
  inputContainer: {
    border: "1px solid black",
    backgroundColor: "white",
    transition: "border-color 0.2s ease" // 加个过渡动画，样式切换更丝滑
  },
  inputContainerFocused: {
    border: "1px solid #006CFF"
  }
};

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
);

方案二：用CSS :focus-within伪类（更简洁） #

如果你的项目不需要兼容旧版浏览器（比如IE），可以直接用CSS的:focus-within伪类——它会在父容器的任意子元素获得焦点时触发父容器的样式，写法更简洁：

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",
      outline: "none"
    }
  },
  inputContainer: {
    border: "1px solid black",
    backgroundColor: "white",
    transition: "border-color 0.2s ease",
    // 当子元素聚焦时，修改父容器边框
    "&:focus-within": {
      border: "1px solid #006CFF"
    }
  }
};

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
);

小提示 #

• 方案一适合需要兼容旧浏览器的场景，方案二更清爽；
• 记得去掉输入框默认的outline，不然会出现双重边框的问题；
• 添加过渡动画能让样式切换更自然，提升用户体验。

内容的提问来源于stack exchange，提问作者jaycee