代码之家 › 专栏 › 技术社区 › rostamiani

如何为所有材质UI组件添加填充和边距?

material-ui customization reactjs node.js

rostamiani · 技术社区 · 6 年前

我需要添加填充或边距的一些材料用户界面组件,但找不到一个简单的方法来做到这一点。我可以添加这些属性吗 到所有组件 ? 像这样:

<Button color="default" padding={10} margin={5}>

我知道这是可能的使用纯CSS和类,但我想做它的材料用户界面的方式。

1 回复 | 直到 4 年前

Miguel Angel Marroquin Jordan 5 年前

只需先导入组件,即可在长方体组件中使用反“间距”:

import Box from '@material-ui/core/Box';

Box组件充当要“修改”间距的组件的“包装器”。

然后可以使用组件的下一个属性:

其中属性是:

m-对于设置边距的类

其中边是:

t-用于设置边距顶部或填充顶部的类

l—用于设置左边距或左边填充的类

r-用于设置右边距或右边填充的类

对于同时设置*-左和*-右的类

y-对于同时设置*-top和*-bottom的类

blank—用于在元素的所有4个边上设置边距或填充的类

<Box m={2} pt={3}>
  <Button color="default">
    Your Text
  </Button>
</Box>

Sakhi Mansoor 6 年前

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);

您可以将带有withStyle HOC的样式注入到组件中。这就是它的工作原理,它非常优化。

编辑时间: 跨所有需要使用的零部件应用样式的步骤 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>

Paul Roub jim 5 年前

import Box from '@material-ui/core/Box';

<Box m={1} p={2}>
  <Button color="default">
    Your Text
  </Button>
</Box>

-1

Chukwuemeka Maduekwe 4 年前

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
});
function App() {
  return (
      <ThemeProvider theme={theme}>
        <LandingPage />
      </ThemeProvider>
  );
 }

就这样。因此,在代码中添加主题部分,并根据需要使用边距/填充

const theme = {
  spacing: 8,
}

<Box m={-2} /> // margin: -16px;
<Box m={0} /> // margin: 0px;
<Box m={0.5} /> // margin: 4px;
<Box m={2} /> // margin: 16px;

或

const theme = {
  spacing: value => value ** 2,
}

<Box m={0} /> // margin: 0px;
<Box m={2} /> // margin: 4px;

<Box m="2rem" /> // margin: 2rem;
<Box mx="auto" /> // margin-left: auto; margin-right: auto