在 React MUI 中创建和设置自定义按钮的样式-解网

问：

我正在 React Material-UI 中使用图像和按钮。我们如何创建这种类型的按钮，创建这些类型的按钮时正确的方法是什么？我附上了图片供参考，预期输出应该是这样的。（https://i.stack.imgur.com/IpeJu.png)

ReactJS 按钮材质-UI

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Button, { ButtonProps } from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import { purple } from '@mui/material/colors';

const BootstrapButton = styled(Button)({
  boxShadow: 'none',
  textTransform: 'none',
  fontSize: 16,
  padding: '6px 12px',
  border: '1px solid',
  lineHeight: 1.5,
  backgroundColor: '#0063cc',
  borderColor: '#0063cc',
  fontFamily: [
    '-apple-system',
    'BlinkMacSystemFont',
    '"Segoe UI"',
    'Roboto',
    '"Helvetica Neue"',
    'Arial',
    'sans-serif',
    '"Apple Color Emoji"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"',
  ].join(','),
  '&:hover': {
    backgroundColor: '#0069d9',
    borderColor: '#0062cc',
    boxShadow: 'none',
  },
  '&:active': {
    boxShadow: 'none',
    backgroundColor: '#0062cc',
    borderColor: '#005cbf',
  }, 
  '&:focus': {
    boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
  },
});

const ColorButton = styled(Button)<ButtonProps>(({ theme }) => ({
  color: theme.palette.getContrastText(purple[500]),
  backgroundColor: purple[500],
  '&:hover': {
    backgroundColor: purple[700],
  },
}));

export default function CustomizedButtons() {
  return (
    <Stack spacing={2} direction="row">
       <ColorButton variant="contained">Custom CSS</ColorButton>
       <BootstrapButton variant="contained" disableRipple>
        Bootstrap
      </BootstrapButton>
   </Stack>
  );
}

上一个：为什么 QT 程序在 SDL 启动时崩溃（C4Droid）

下一个：如何在 Hostinger Elementor 中删除主页右上角的按钮？

在 React MUI 中创建和设置自定义按钮的样式

Creating and styling custom buttons in React MUI

评论