javascript Material UI和Bootstrap可以一起使用吗?

uelo1irk  于 2023-05-05  发布在  Java
关注(0)|答案(2)|浏览(130)

我想使用React构建我的第一个Web应用程序。我知道我可以从Material-UI获得组件源代码,并根据我的需要进行定制。然而,虽然材料ui仅提供组件。我可以使用bootstrap来获取HTML/CSS模板来设置我的网页结构并使用material-ui合并react组件吗?我很困惑,如何获得网页的结构,只是材料ui单独。先谢谢你了。

yqyhoc1h

yqyhoc1h1#

实际上,您应该在项目中实现material-ui。例如,用create-react-app开始你的项目,然后用material-ui指南在你的项目上实现它。
然后使用以下代码将主题更改为twitter-bootstrap

const BootstrapTextField = withStyles(({ palette, transitions, spacing }) =>
  createStyles({
    input: {
      '&:focus': {
        borderColor: palette.primary.main,
        boxShadow: `${fade(palette.primary.main, 0.25)} 0 0 0 0.2rem`,
      },
      backgroundColor: palette.common.white,
      border: '1px solid #ced4da',
      borderRadius: 4,
      fontFamily: [
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(','),
      fontSize: 16,
      padding: '10px 12px',
      position: 'relative',
      transition: transitions.create(['border-color', 'box-shadow']),
      width: '100%',
    },
    root: {
      'label + &': {
        marginTop: spacing(3),
      },
    },
  })
)(InputBase);
eqqqjvef

eqqqjvef2#

是的,你可以使用Bootstrap来设置你的布局,并从任何可用的框架中整合组件。示例:

<div className="container">
    <Typography className="mt-3" variant="h5">
        Hello
    </Typography>
</div>

我曾经参与过一个使用Bootstrap类和MUI组件的项目。我知道MUI有自己的布局系统,但我已经习惯了Bootstrap,只想要MUI的组件。

相关问题