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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 403 天前的主题，其中的信息可能已经有所发展或是发生改变。

环境

就是一个空的 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 上过现网吗

2 条回复 • 2024-05-09 13:38:36 +08:00

yilonglei

2023-10-24 09:47:03 +08:00

你入口 main 引入 tailwindcss 样式了吗 @tailwind base;这些在的 global.css

beiwei2008

193 天前

遇到相同的问题，我这边的情况是
"./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}",