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';

二 添加轮播图扩展组件

我想引入扩展组件轮播图

js 复制代码
yarn add embla-carousel-react@^7.1.0 @mantine/carousel

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

js 复制代码
import '@mantine/carousel/styles.css'

持续更新

相关推荐
灵感__idea6 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴7 小时前
Mix
前端·webgl
代码续发7 小时前
前端组件梳理
前端
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记8 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数9 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante9 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript