craco 配置 styled-component 和 material design

原创于 2025-04-20 19:30:32 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #reactjs

1. npm install @mui/material @mui/styled-engine-sc styled-components

2. 配置craco.config.js

  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 路径别名
      '@mui/styled-engine': '@mui/styled-engine-sc', // 强制 MUI 使用 styled-components
    },
    // 删除重复的 resolve.alias 配置
  },

3. 在index.js中配置theme 不然会报错

  <Suspense fallback="loading">
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <HashRouter>
          <App />
        </HashRouter>
      </ThemeProvider>
    </Provider>
  </Suspense>

theme/index.js

import { createTheme } from '@mui/material/styles';
const theme = createTheme({
  mode: 'light',
  color: {
    primaryColor: '#ff385c',
    secondaryColor: '#00848a',
  },

  textColor: {
    primaryColor: '#484848',
    secondaryColor: '#222222',
  },
  mixin: {
    boxShadow: `
     transition: box-shadow 200ms ease;

    &:hover {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    }
    `,
  },
});

export default theme;