使用样式化组件单击时如何从 Material IconButton 中删除轮廓边框

问题描述

我使用了材质 iconButton，但不希望单击按钮时出现轮廓边框。 我尝试了一切，但似乎没有任何效果。是否可以使用样式化组件来实现？

检查下图。

图片

我的代码在这里：

代码

import React from "react";
import { Paper,Grid,Typography } from "@material-ui/core";
import styled from "styled-components";
import IconButton from "@material-ui/core/IconButton";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import EditIcon from "@material-ui/icons/Edit";

const StyledContainer = styled.div`
  width: 90%;
  text-align: left;
  padding: 10px 16px;
`;

const DataContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const InfoContainer = styled.div`
  display: flex;
  align-items: center;
`;

const EditButton = styled(IconButton)`
  outline: none;
  border: none;
`;

function DocItem({ title,author }) {
  return (
    <StyledContainer>
      <Grid item xs={12}>
        <Paper elevation={3} style={{ padding: "10px 16px" }}>
          <DataContainer>
            <InfoContainer>
              <CheckCircleIcon
                style={{ width: "64px",height: "64px",marginRight: "22px" }}
              />
              <div>
                <h3>{title}</h3>
                <h4>{author}</h4>
              </div>
            </InfoContainer>
            <EditButton>
              <EditIcon />
            </EditButton>
          </DataContainer>
        </Paper>
      </Grid>
    </StyledContainer>
  );
}

export default DocItem;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）