使用样式组件单击时如何从材质图标按钮中删除轮廓边框

Question

我使用了材质 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;

Answer 1

我遇到了同样的问题，但是一旦我导入了垫子按钮，它就开始正常工作了。

示例 从 '@angular/material/button' 导入 {MatButtonModule} 进口：[ 垫子按钮模块，