Material UI 和 Bootstrap 可以一起使用吗？答案

【问题标题】：Can Material UI and Bootstrap be used together?Material UI 和 Bootstrap 可以一起使用吗？
【发布时间】：2020-09-25 08:02:30
【问题描述】：

我希望使用 React 构建我的第一个 Web 应用程序。我知道我可以从 Material-UI 获取组件源代码并根据我的需要进行自定义。但是，虽然材料 ui 仅提供组件。我可以使用 bootstrap 获取 HTML/CSS 模板来设置我的网页结构并使用 material-ui 合并反应组件吗？我对如何仅使用 material-ui 来获取网页的结构感到困惑。提前致谢。

【问题讨论】：

标签： javascript reactjs twitter-bootstrap

【解决方案1】：

实际上，您应该在您的项目中实现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);

【讨论】：