index.js

Question

我想在我的应用程序上添加一个浮动动作按钮（FAB）。我想在其中调整宽度和高度以使用CSS减小尺寸的地方。此外，该按钮也没有按预期显示按钮内部的编辑图标。

下面是我尝试过的代码，

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './profile/profile.css';
import ProfileInfo from './profile/profile';

ReactDOM.render(
    <ProfileInfo />, 
    document.getElementById('root')
);

profile.js

import React from 'react';
import './profile.css';
import Fab from '@material-ui/core/Fab';
import Icon from '@material-ui/core/Icon';


class ProfileInfo extends React.Component{   

    render(){
        return(
            <div className='prof-main-container'>
            <div className='prof-items-container'>
            <div className='prof-pic-container'><img src="https://ik.imagekit.io/upgrad1/upgradlogo.png" className="prof-pic" alt="profile pic" /></div>
            <div className='prof-info-data-container'>
                <div className='user-name'>User Name</div>
                <div className='posts-follows-container'>
                    {/* <span className='posts-follows-item-first'>Posts:6</span>
                    <span className='posts-follows-item'>Follows:4</span>
                    <span className='posts-follows-item'>Followed By:6</span> */}
                    <span>Posts:6</span>
                    <span className='posts-follows-item'>Follows:4</span>
                    <span>Followed By:6</span>
                </div>
                <div className='full-name-container'>
                    <div className='full-name'>UpGrad Education</div>
                    <div className='full-name-edit-btn'>
                    {/* <Button variant="fab" color="secondary" size='medium'>
                        Edit
                    </Button> */}
                    <Fab color="secondary" aria-label="Edit" className='edit-btn'>
                        <Icon>edit_icon</Icon>
                    </Fab>
                    </div>
                </div>
            </div>
            </div>
            </div>
        )
    }

}

export default ProfileInfo

profile.css

.prof-main-container {
    display: flex; 
    background-color: #5995DA;  /* Blue */
    padding: 20px 0;   
}

.prof-items-container {
    border: 1px solid #fff;
    width: 100%;
    display: flex;
    /* justify-content: space-around; */
    padding: 0% 20%;
    /* padding-left: 500px; */
}

.prof-info-data-container{
    display: flex;
    /* justify-content: space-between; */
    flex-direction: column;
    margin: 0px 40px;
}

.prof-pic-container{
    padding: 15px 0px 0px 0px;
}

.prof-pic{
    width: 50px;
    height: 50px;
}

.posts-follows-item{
    margin: 0px 60px;
}

.posts-follows-container{
    font-size: 11px;
    margin: 2px 0px;
}

.full-name-container{
    display: flex;
    flex-direction: row;
}

.full-name{
    font-size: 12px; 
    margin: 10px 0px;   
}

.user-name{
    font-size: 12px;
    font-weight: bold;
    margin: 5px 0px;
}

.full-name-edit-btn{
    margin: 5px 20px;    
}

.edit-btn{
    width: 20px;
    height: 20px;
}

预期的编辑图标如下。

但是实际上它呈现如下。请注意，按钮内没有按预期显示任何编辑图标，而是按钮内显示了“ EC”。请在此处忽略背景颜色。

此外，我应该能够调整下面的编辑按钮的宽度和高度以减小其大小。但是我无法使用CSS来做到这一点。我尝试在profile.css中添加一个名为“ edit-btn”的类，但是它不起作用。

Answer 1

您尝试在classes上使用className道具而不是Fab element道具。根据文档，您应该使用前者。

相同之处请参见此链接： Material UI FAB props

我已经更新了答案。如果您给.edit-btn类更多的话，它将可以正常工作。参照我的代码沙箱。关于您的specificity，您可以帮助我了解什么是<Icon>吗？

code sandbox 尝试一下，看看是否可行。另外，请分享您到目前为止的尝试。谢谢！

如何在React中自定义Floating Action Button材质ui组件的宽度和高度。此外，该按钮也无法正确显示编辑图标

index.js

profile.js

profile.css

1 个答案: