matine组件库踩坑日记 --- react

Mantine实践

• [一 禁忌核心css样式](#一 禁忌核心css样式)
• [二 添加轮播图扩展组件](#二 添加轮播图扩展组件)

一 禁忌核心css样式

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom';
import App from './App.jsx'
import './index.css'
import '@mantine/core/styles.css';//非常重要，记得倒入

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
     <App />
    </BrowserRouter>
  </React.StrictMode>,
)

忘记倒入这个，组件就不会生成样式。（感觉自己很笨）

import '@mantine/core/styles.css';

二 添加轮播图扩展组件

我想引入扩展组件轮播图

yarn add embla-carousel-react@^7.1.0 @mantine/carousel

如果没有引入额外的css，该组件也不会生效样式

import '@mantine/carousel/styles.css'

---

持续更新