React中点击任意MUI自定义输入框如何让关联输入框同步应用扩展CSS

你要实现任意输入框聚焦时两个输入框都加宽，可以用以下两种方案实现，优先推荐代码改动量最小的CSS方案： #

方案1：CSS伪类实现 #

利用父容器的:focus-within伪类，只要容器内任意输入框处于聚焦状态，就自动给所有子输入框应用加宽样式，无需编写JS逻辑。
修改后完整代码：

import { useState } from 'react';
import { styled } from '@mui/material/styles';
import InputUnstyled from '@mui/base/InputUnstyled';
import CssBaseline from '@mui/material/CssBaseline';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';

const StyledInputElement = styled('input')(`
  width: 200px;
  font-size: 1rem;
  font-family: IBM Plex Sans, sans-serif;
  font-weight: 400;
  line-height: 1.4375em;
  background: rgb(243, 246, 249);
  border: 1px solid #E5E8EC;
  border-radius: 10px;
  padding: 6px 10px;
  color: #20262D;
  transition: width 300ms ease;

  &:hover {
    background: #EAEEF3;
    border-color: #E5E8EC;
  }

  &:focus {
    outline: none;
    transition: width 200ms ease-out;
  }
`);

const CustomInput = React.forwardRef(function CustomInput(props, ref) {
  return (
    <InputUnstyled components={{ Input: StyledInputElement }} {...props} ref={ref} />
  );
});

const AuthDialog = (props) => {
  // 输入框组样式，配置focus-within规则
  const inputGroupSx = {
    '&:focus-within .MuiInput-input': {
      width: '320px'
    }
  }

  return (
    <>
      <CssBaseline />
      <Dialog
        fullWidth
        onClose={() => {}}
        open={props.dilaogOpenProp}
        maxWidth="xs"
        sx={{
          backdropFilter: "blur(3px)",
        }}
      >
        <DialogTitle>Please login</DialogTitle>
        <DialogContent>
          {/* 给两个输入框加外层容器，应用上面的focus-within样式 */}
          <Box sx={inputGroupSx}>
            <CustomInput aria-label="Demo input" placeholder="Username" />
            <br/>
            <CustomInput aria-label="Demo input" placeholder="Password" />
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={props.handleDialogCloseProp}>Close</Button>
        </DialogActions>
      </Dialog>
      <Box
        sx={{
          minHeight: "100vh",
          background:
            "url(https://source.unsplash.com/random) no-repeat center center",
          backgroundSize: "cover",
        }}
      ></Box>
    </>
  );
}

export default AuthDialog;

方案2：React状态控制 #

如果后续需要对聚焦状态做更多自定义逻辑处理，可以用React状态统一管理两个输入框的加宽状态：
核心修改点：

• 新增isInputFocus状态标识是否有输入框处于聚焦状态
• 给两个输入框绑定onFocus和onBlur事件同步状态
• 将状态传递给输入框动态控制宽度
  修改后核心代码片段：

// 修改CustomInput接收是否加宽的参数
const CustomInput = React.forwardRef(function CustomInput(props, ref) {
  const {isExpand, ...rest} = props;
  return (
    <InputUnstyled 
      components={{ Input: StyledInputElement }} 
      sx={{width: isExpand ? '320px' : '200px'}}
      {...rest} 
      ref={ref} 
    />
  );
});

const AuthDialog = (props) => {
  const [isInputFocus, setIsInputFocus] = useState(false);

  return (
    <>
      <CssBaseline />
      <Dialog
        fullWidth
        onClose={() => {}}
        open={props.dilaogOpenProp}
        maxWidth="xs"
        sx={{
          backdropFilter: "blur(3px)",
        }}
      >
        <DialogTitle>Please login</DialogTitle>
        <DialogContent>
          <CustomInput 
            aria-label="Demo input" 
            placeholder="Username" 
            isExpand={isInputFocus}
            onFocus={() => setIsInputFocus(true)}
            onBlur={() => setIsInputFocus(false)}
          />
          <br/>
          <CustomInput 
            aria-label="Demo input" 
            placeholder="Password" 
            isExpand={isInputFocus}
            onFocus={() => setIsInputFocus(true)}
            onBlur={() => setIsInputFocus(false)}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={props.handleDialogCloseProp}>Close</Button>
        </DialogActions>
      </Dialog>
      {/* 其余代码保持不变 */}
    </>
  );
}

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