请教一下 nextUI 样式出不来的问题?

2023-10-12 16:21:43 +08:00
 godleon

环境

就是一个空的 react 项目,感觉 nextUI 的样式很好看,然后搭建完后,样式出不来..

# package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
  "@nextui-org/react": "^2.1.13",
  "@testing-library/jest-dom": "^5.17.0",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "@types/jest": "^27.5.2",
  "@types/node": "^16.18.53",
  "@types/react": "^18.2.22",
  "@types/react-dom": "^18.2.7",
  "@types/react-router-dom": "^5.3.3",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.16.0",
  "react-scripts": "5.0.1",
  "typescript": "^4.9.5",
  "web-vitals": "^2.1.4"
},
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
},
"devDependencies": {
  "tailwindcss": "^3.3.3"
}
}
#tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};
#App.tsx

import * as React from "react";
import {Button} from "@nextui-org/react";

// 1. import `NextUIProvider` component
import {NextUIProvider} from "@nextui-org/react";

function App() {
  // 2. Wrap NextUIProvider at the root of your app
  return (
    <NextUIProvider>
    <Button color="primary">
          Button
    </Button>
    </NextUIProvider>
  );
}

然后结果是 这个 Button 没有任何效果....

PS

有大佬用 nextUI 上过现网吗

955 次点击
所在节点    前端开发
2 条回复
yilonglei
2023-10-24 09:47:03 +08:00
你入口 main 引入 tailwindcss 样式了吗 @tailwind base;这些在的 global.css
beiwei2008
228 天前
遇到相同的问题,我这边的情况是
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",这个路径不存在
需要改为"./node_modules/@nextui-org/react/node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/981373

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX