V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
godleon
V2EX  ›  前端开发

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

  •  
  •   godleon · 2023-10-12 16:21:43 +08:00 · 924 次点击
    这是一个创建于 415 天前的主题,其中的信息可能已经有所发展或是发生改变。

    环境

    就是一个空的 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
        1
    yilonglei  
       2023-10-24 09:47:03 +08:00
    你入口 main 引入 tailwindcss 样式了吗 @tailwind base;这些在的 global.css
    beiwei2008
        2
    beiwei2008  
       205 天前
    遇到相同的问题,我这边的情况是
    "./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}",
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2476 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 02:16 · PVG 10:16 · LAX 18:16 · JFK 21:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.