Как настроить ширину и высоту компонента пользовательского интерфейса материала Плавающей кнопки действий в React. Также кнопка не показывает значок редактирования правильно - PullRequest
Новая
       12

Как настроить ширину и высоту компонента пользовательского интерфейса материала Плавающей кнопки действий в React. Также кнопка не показывает значок редактирования правильно

1 голос
/ 25 мая 2019

Я хочу добавить кнопку плавающего действия (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;
}

Ожидаемый значок редактирования показан ниже.

enter image description here

Но на самом деле это рендеринг, как показано ниже. Обратите внимание, что значок редактирования не отображается внутри кнопки, как ожидалось, вместо этого он показывает «EC» внутри кнопки. Пожалуйста, не обращайте внимания на цвет фона здесь.

enter image description here

Кроме того, я должен иметь возможность регулировать ширину и высоту кнопки редактирования ниже, чтобы уменьшить ее размер. Но я не могу сделать это с помощью css. Я попытался добавить класс с именем "edit-btn" внутри profile.css, но он не работает.

enter image description here

1 Ответ

0 голосов
/ 25 мая 2019

Вы пытались использовать classes prop вместо className на вашем Fab element. Согласно документации, вы должны использовать первый.

Ссылка на эту ссылку для того же: Материал UI FAB реквизит

Я обновил свой ответ. Ваш .edit-btn класс будет работать нормально, если вы дадите ему больше specificity. Обратитесь к моей песочнице кода для того же самого. Что касается вашего <Icon>, вы можете помочь мне понять, что такое edit_icon?

код песочницы Попробуйте и посмотрите, работает ли он. Также, пожалуйста, поделитесь тем, что вы уже пробовали. Спасибо!

...