如何解决使用样式化组件单击时如何从 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 举报,一经查实,本站将立刻删除。