梗概

MUI中可以将样式传入给组件

原文

React Box - Material UI

示例

在Material-UI中，可以通过传入自定义的样式对象给组件来实现自定义UI组件的样式。例如，我们可以使用Box组件来创建一个自定义的按钮，并为其添加特定的样式：

import React from 'react';
import Box from '@mui/material/Box';
 
const CustomButton = () => {
  const customStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    borderRadius: '5px',
    cursor: 'pointer',
  };
 
  return (
    <Box sx={customStyle}>
      Click me
    </Box>
  );
};
 
export default CustomButton;

在上面的示例中，我们创建了一个CustomButton组件，并传入了一个自定义的样式对象customStyle给Box组件。这个样式对象包含了背景色、文字颜色、内边距、边框半径和鼠标指针样式等属性。最后，我们将文字内容“Click me”放在了Box组件中。

通过这种方式，我们可以轻松地为Material-UI的组件添加自定义样式，从而实现个性化的UI设计。