node.js 如何为所有 Material-UI 组件添加内边距和边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52124938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add padding and margin to all Material-UI components?
提问by rostamiani
I need to add padding or margin to some of Material-UI components, but could not find an easy way to do it. Can I add these properties to all components? something like this:
我需要为某些 Material-UI 组件添加内边距或边距，但找不到简单的方法。我可以将这些属性添加到所有组件吗？像这样：
<Button color="default" padding={10} margin={5}>
I know that this is possible using pure CSS and classes but I want to do it the Material-UI way.
我知道使用纯 CSS 和类可以做到这一点，但我想以 Material-UI 方式实现。
回答by Sakhi Mansoor
Material-UI's styling solution uses JSS at its core. It's a high performance JS to CSS compiler which works at runtime and server-side.
Material-UI 的样式解决方案以 JSS 为核心。它是一个高性能的 JS 到 CSS 编译器，可在运行时和服务器端工作。
import { withStyles} from '@material-ui/core/styles';
const styles = theme => ({
buttonPadding: {
padding: '30px',
},
});
function MyButtonComponent(props) {
const { classes } = props;
return (
<Button
variant="contained"
color="primary"
className={classes.buttonPadding}
>
My Button
</Button>
);
}
export default withStyles(styles)(MyButtonComponent);
You can inject styles with withStyle HOC into your component. This is how it works and it's very much optimized.
您可以使用 withStyle HOC 将样式注入到您的组件中。这就是它的工作原理，并且经过了极大的优化。
EDITED:To apply styles across all components you need to use createMuiThemeand wrap your component with MuiThemeprovider
已编辑：要在所有组件中应用样式，您需要使用createMuiTheme并包装您的组件MuiThemeprovider
const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
margin: "10px",
padding: "10px"
}
}
}
});
<MuiThemeProvider theme={theme}>
<Button variant="contained" color="primary">
Custom CSS
</Button>
<Button variant="contained" color="primary">
MuiThemeProvider
</Button>
<Button variant="contained" color="primary">
Bootstrap
</Button>
</MuiThemeProvider>
回答by Miguel Angel Marroquin Jordan
You can use de "Spacing" in a BOX component just by importing the component first:
您可以通过先导入组件在 BOX 组件中使用 de "Spacing"：
import Box from '@material-ui/core/Box';
The Box component works as a "Wrapper" for the component you want to "Modify" the spacing.
Box 组件用作要“修改”间距的组件的“包装器”。
then you can use the next properties on the component:
然后您可以在组件上使用下一个属性：
The space utility converts shorthand margin and padding props to margin and padding CSS declarations. The props are named using the format {property}{sides}.
space 实用程序将速记边距和填充道具转换为边距和填充 CSS 声明。道具使用格式 {property}{sides} 命名。
Where property is one of:
财产是以下之一：
m - for classes that set margin p - for classes that set padding
m - 用于设置边距的类 p - 用于设置填充的类
Where sides is one of:
其中边是以下之一：
t - for classes that set margin-top or padding-top
t - 对于设置 margin-top 或 padding-top 的类
b - for classes that set margin-bottom or padding-bottom
b - 对于设置 margin-bottom 或 padding-bottom 的类
l - for classes that set margin-left or padding-left
l - 对于设置 margin-left 或 padding-left 的类
r - for classes that set margin-right or padding-right
r - 对于设置 margin-right 或 padding-right 的类
x - for classes that set both *-left and *-right
x - 对于同时设置 *-left 和 *-right 的类
y - for classes that set both *-top and *-bottom
y - 对于同时设置 *-top 和 *-bottom 的类
blank - for classes that set a margin or padding on all 4 sides of the element
空白 - 对于在元素的所有 4 个边上设置边距或填充的类
as an example:
举个例子：
<Box m={2} pt={3}>
<Button color="default">
Your Text
</Button>
</Box>
回答by Muhammad Zubair Moosani
import Box from '@material-ui/core/Box';
<Box m={1} p={2}>
<Button color="default">
Your Text
</Button>
</Box>
