如何在React中自定义浮动动作按钮材料ui组件的宽度和高度。此外，该按钮不能正确显示编辑图标

在React中自定义浮动动作按钮材料UI组件的宽度和高度，同时确保编辑图标正确显示，可以按照以下步骤进行：

导入所需的依赖：首先，确保已经安装了React和Material-UI库。可以使用以下命令进行安装：

npm install react
npm install @material-ui/core

创建自定义浮动动作按钮组件：在React项目中创建一个新的组件，例如FloatingActionButton.js。在该组件中，导入所需的Material-UI组件：

import React from 'react';
import Fab from '@material-ui/core/Fab';
import EditIcon from '@material-ui/icons/Edit';

自定义按钮的宽度和高度：使用style属性来自定义按钮的宽度和高度。可以通过设置width和height属性来实现。例如，将按钮的宽度设置为200px，高度设置为50px：

const styles = {
  button: {
    width: '200px',
    height: '50px',
  },
};

const FloatingActionButton = () => {
  return (
    <Fab style={styles.button} color="primary">
      <EditIcon />
    </Fab>
  );
};

渲染自定义按钮组件：在需要使用该自定义按钮的地方，将FloatingActionButton组件进行渲染：

import React from 'react';
import FloatingActionButton from './FloatingActionButton';

const App = () => {
  return (
    <div>
      {/* 其他组件 */}
      <FloatingActionButton />
    </div>
  );
};

export default App;

通过以上步骤，你可以在React中自定义浮动动作按钮材料UI组件的宽度和高度，并确保编辑图标正确显示。请注意，以上代码示例中的宽度和高度仅作为示例，你可以根据实际需求进行调整。

推荐的腾讯云相关产品和产品介绍链接地址：