web-dev-qa-db-ja.com

すべてのMaterial-UIコンポーネントにパディングとマージンを追加する方法は？

一部のMaterial-UIコンポーネントにパディングまたはマージンを追加する必要がありますが、簡単な方法が見つかりませんでした。これらのプロパティを追加できますかすべてのコンポーネントに？このようなもの：

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

私はこれが純粋なCSSとクラスを使用して可能であることを知っていますが、マテリアルUIの方法でそれをしたいです。

node.jsreactjscustomizationmaterial-ui
11
rostamiani

Material-UIのスタイリングソリューションは、コアでJSSを使用しています。ランタイムおよびサーバーサイドで動作するCSSコンパイラーへの高性能JSです。

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>
5
Sakhi Mansoor