如何在材质界面中添加按钮的边距，并带有间距属性

Question

我在材料ui中的一个纸元素中有一个按钮。我想给按钮添加一些页边空白，因为它在FullWidthTabs组件和按钮之间有一些间距。

代码：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import FullWidthTabs from './FullWidthTabs';
import Paper from '@material-ui/core/Paper';
import { spacing } from '@material-ui/system';

const useStyles = makeStyles(theme => ({
root: {
width: "70vw",
},
}));

export default function Bookingbox() {
const classes = useStyles();

return (
<div>
<Box mx="auto" className={classes.root}>
<Paper elevation={20} >
<FullWidthTabs />
<Button variant="contained" 
color="green"
className={classes.button} 
fullWidth="true"
mt={1}
style={{
backgroundColor: "green",
color: "white"
}}>
Suchen
</Button>
</Paper>
</Box>
</div>
);
}

根据材料ui文档(https://material-ui.com/system/spacing/)，如果我将mt添加到我的按钮，间距应该有效。我这样做了，但没有结果。

免责声明：我还没有创建自己的主题，但从我的POV来看，这是没有必要的。也许错误在于没有自己的主题。

Answer 1

您可以使用材质ui样式系统扩展按钮。在这种情况下，间距系统。一种方法是创建一个名为Button.jsx/Button.tsx的新组件，如下所示：

import { styled } from "@material-ui/core/styles";
import { spacing } from "@material-ui/system";
import MuiButton from "@material-ui/core/Button";
/**
* Applies the spacing system to the material UI Button
*/
const Button = styled(MuiButton)(spacing);
export default Button;

现在你可以这样使用了：<Button mt={2}>Click Me</Button>。如果使用typescript，按钮道具将自动扩展为所有间距道具！

如果要添加多个系统，请使用compose功能：

import { compose, spacing, borders } from "@material-ui/system";
...
export default styled(MuiButton)(compose(spacing, borders))

更新：

对于Material UI V5，不再需要此功能。sx道具会自动包含此属性。所以在这个例子中，不需要定制，你只需要使用<Button sx={{mt: 2}}>Click Me</Button>

Answer 2

建议使用<Box>组件为组件添加边距和填充。请尝试使用下面的代码。

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Box from '@material-ui/core/Box'
import Button from '@material-ui/core/Button'
import FullWidthTabs from './FullWidthTabs'
import Paper from '@material-ui/core/Paper'
import { spacing } from '@material-ui/system'
const useStyles = makeStyles(theme => ({
root: {
width: "70vw",
},
}))
export default function Bookingbox() {
const classes = useStyles()
return (
<div>
<Box mx="auto" className={classes.root}>
<Paper elevation={20} >
<FullWidthTabs />
<Box mt={10}>
<Button variant="contained"
color="green"
className={classes.button}
fullWidth="true"
mt={1}
style={{
backgroundColor: "green",
color: "white"
}}>
Suchen
</Button>
</Box>
</Paper>
</Box>
</div>
)
}

您可以将mt={}更改为pt={}以进行填充，而不是边距。