javascript - 单击输入 : Material-Ui 时保持按钮聚焦

Question

我有下一个 Material -ui 对话框:

但是当我点击输入字段时，社交按钮会散焦，我不希望这样:

按钮:

export const SocialButton = (props: SocialButtonProps) => {
  const classes = useStyles();
  return (
    <IconButton
    centerRipple={true}
    className={classes.socialButton}
    size="small"
    onClick={props.onClick}
    aria-label="add"
    component="span"
    disableRipple
  >
     {props.icon}
  </IconButton>
);

};

风格:

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    socialButton: {
      '&:focus': {
        boxShadow: `0 0 0 0.1rem ${theme.palette.primary.main}`,
      },
    },
  }),
);

组件:

      <Grid container>
        <Grid item>
          <SocialButton
            icon={<BehanceLogo />}
            onClick={() => setSocialPlatform('behance')}
          />
          ....
        </Grid>
      </Grid>

Answer 1

只需创建一个具有相同样式的“事件”类并保存按钮应处于事件状态的状态(使用 useState )。

你可以这样做:

const [activeButton, setActiveButton] = useState(null)

...

if (activeButton === 'behance')
    behanceStyle = classes.active // Use useStyle to create the 'active' class
          
return (
    <SocialButton
        className={behanceStyle}
        icon={<BehanceLogo />}
        onClick={() => {
            setSocialPlatform('behance')
            setActiveButton('behance')
        }}
    />
  )