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

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

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

npm install react
npm install @material-ui/core

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

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

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

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

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

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

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

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

export default App;

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

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

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
• 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
• 物联网平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
• 移动开发平台（腾讯移动开发者平台）：https://cloud.tencent.com/product/mmp
• 云存储（对象存储 COS）：https://cloud.tencent.com/product/cos
• 区块链服务（腾讯云区块链服务）：https://cloud.tencent.com/product/tbaas
• 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe