单击输入时保持按钮聚焦：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')
        }}
    />
  )