Hướng dẫn primereact css not working - primereact css không hoạt động

Tôi đang làm việc trên một ứng dụng React JS, tôi đã thêm thư viện ReactbootStrap & Primereact cho kiểu dáng. Thư viện ReactbootStrap đang hoạt động tốt nhưng kiểu dáng Primereact không được áp dụng, tôi đã làm theo tất cả các bước có trong phần bắt đầu, bất cứ ai có thể gợi ý cho tôi những gì còn thiếu. Tôi đang thêm các tập tin cho sự giải quyết. Tôi đã sử dụng lệnh bên dưới để thêm các tệp trong các mô -đun nút

  • NPM Cài đặt Primereact -Save

  • NPM Cài đặt Primeicons -Save

Tệp App.js

import logo from './logo.svg';
import './App.css';
import Header from './MyComponents/Header'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';       
import {Todos} from './MyComponents/Todos'
import {TodoElements} from './MyComponents/TodoElements'
import {Footer} from './MyComponents/Footer'

function App[] {
  
  
  
  return [
    
    
    
    
    
  ];
}

export default App;

Todos.js nơi tôi đang thêm nút kiểu Primereact

import React from 'react';
import { Button } from 'primereact/button';

export const Todos = [] => {
    return [
        
] }

Thêm gói.json để giải quyết

{
  "name": "todos-list",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "primeicons": "^5.0.0",
    "primereact": "^7.1.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.1",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "react-transition-group": "^4.4.2",
    "style-loader": "^3.3.1",
    "web-vitals": "^2.1.3"
  },
  "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"
    ]
  }
}

Thêm hình ảnh kết quả cuối cùng

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Pick a username Email AddressPassword

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

leejakuPosts: 5Joined: 13 Jul 2018, 13:12Posts: 5Joined: 13 Jul 2018, 13:12

Hi, I am Jake Lee. I bought Ultima Template for my project.

After some modification, web style was broken. I don't know why...

I tried to solve this problem. but still stucked. When I saw some theme css. That's not CSS file, just HTML.
When I saw some theme css. That's not CSS file, just HTML.

Can you help me?

kfcsoftPosts: 4Joined: 01 Jun 2021, 13:57Posts: 4Joined: 01 Jun 2021, 13:57

06 Jul 2022, 01:11

On Windows, my project is working fine. I even correct all typescript problems. After I switch to Mac, things are not working. The style is not working at all. So I do upgrade-interative and use prime 8.2, React 18.2 and React-Dom 18.2. Fix the React Create Root stuff, Things are still not working....
After I switch to Mac, things are not working. The style is not working at all. So I do upgrade-interative and use prime 8.2, React 18.2 and React-Dom 18.2. Fix the React Create Root stuff, Things are still not working....

    • Who is online

      Users browsing this forum: No registered users and 0 guests

    • Chỉnh lại file
      {
        "name": "todos-list",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@testing-library/jest-dom": "^5.16.1",
          "@testing-library/react": "^12.1.2",
          "@testing-library/user-event": "^13.5.0",
          "bootstrap": "^5.1.3",
          "primeicons": "^5.0.0",
          "primereact": "^7.1.0",
          "prop-types": "^15.8.1",
          "react": "^17.0.2",
          "react-bootstrap": "^2.1.1",
          "react-dom": "^17.0.2",
          "react-scripts": "5.0.0",
          "react-transition-group": "^4.4.2",
          "style-loader": "^3.3.1",
          "web-vitals": "^2.1.3"
        },
        "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"
          ]
        }
      }
      
      9 để khai báo thêm proxy nhận port 4000 từ server:
    • Tới đây ta đã liên kết chạy được đồng thời Server và Client rồi [bằng cách chạy lệnh
      npm install -g create-react-app
      0], tuy nhiên chúng ta vẫn chưa liên kết dữ liệu được, xem tiếp bên dưới để xem dữ liệu được liên kết như thế nào nhé.
    • Gọi API từ Project React
    • React.js server & client

    React.js server & client

    • Bài học trước ta đã tạo được một API đơn giản, vậy làm sao để sử dụng API này bên trong một project React?
    • Bản thân React được xem như là nơi để xử lý ở phía client, còn API Express sẽ dùng xử lý ở phía server, điều này cũng có nghĩa là React và API Express sẽ chạy ở mỗi PORT riêng, do đó để cả 2 có thể liên kết được với nhau, ta cần xử lý PORT.
    • Ta lần lượt tiến hành các bước như sau:
      • Cài đặt React
      • Cài đặt concurrently để liên kết cổng server và client
      • Gọi API từ Project React, sử dụng thư viện Axios để Get dữ liệu

    Cài đặt React

    • Cài đặt concurrently để liên kết cổng server và client
    • Gọi API từ Project React, sử dụng thư viện Axios để Get dữ liệu

    Cài đặt bộ cài app React:

    npm install -g create-react-app

    Tạo project React với tên

    import React from 'react';
    import { Button } from 'primereact/button';
    
    export const Todos = [] => {
        return [
            
    ] }
    2:

    • Cấu trúc thư mục lúc này có dạng:

    ReactMySQLProject

    • client

      • node_modules

        • ...
      • public

        • ...
      • src

        • App.js
        • ...
      • .gitignore
      • package.json
      • package-lock.json
    • node_modules

      • ...
    • src
    • app.js
    • package.json
    • package-lock.json

    • Tới đây, nếu các bạn dùng lần lượt các lệnh sau thì sẽ chạy được project React: [trước tiên cần thoát khỏi mode đang chạy React bằng cách nhấn
      import React from 'react';
      import { Button } from 'primereact/button';
      
      export const Todos = [] => {
          return [
              
      ] }
      3 chọn
      import React from 'react';
      import { Button } from 'primereact/button';
      
      export const Todos = [] => {
          return [
              
      ] }
      4].
    • Nhìn vào đường dẫn thư mục trên trình duyệt, ta thấy hiện tại project React mặc định chạy ở PORT
      import React from 'react';
      import { Button } from 'primereact/button';
      
      export const Todos = [] => {
          return [
              
      ] }
      5, trong khi ở bài trước nếu chạy PORT
      import React from 'react';
      import { Button } from 'primereact/button';
      
      export const Todos = [] => {
          return [
              
      ] }
      6 thì ta sẽ gọi được API Express.

    Phần tiếp theo bên dưới sẽ giúp kết hợp để sử dụng được API Express bên trong một project React.

    • Cài đặt concurrently để liên kết cổng server và client

    Ta tiến hành cài đặt concurrently bên trong thư mục

    import React from 'react';
    import { Button } from 'primereact/button';
    
    export const Todos = [] => {
        return [
            
    ] }
    0 với các lệnh sau:

    cd ../
    npm install –save concurrently

    • Cài đặt concurrently:

    • {
        "name": "todos-list",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@testing-library/jest-dom": "^5.16.1",
          "@testing-library/react": "^12.1.2",
          "@testing-library/user-event": "^13.5.0",
          "bootstrap": "^5.1.3",
          "primeicons": "^5.0.0",
          "primereact": "^7.1.0",
          "prop-types": "^15.8.1",
          "react": "^17.0.2",
          "react-bootstrap": "^2.1.1",
          "react-dom": "^17.0.2",
          "react-scripts": "5.0.0",
          "react-transition-group": "^4.4.2",
          "style-loader": "^3.3.1",
          "web-vitals": "^2.1.3"
        },
        "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"
          ]
        }
      }
      
      1 do hiện tại con trỏ thư mục đang ở tại thư mục
      import React from 'react';
      import { Button } from 'primereact/button';
      
      export const Todos = [] => {
          return [
              
      ] }
      2 do đó cần di chuyển ra ngoài một cấp, để đảm bảo bộ cài đặt sẽ được cài tại thư mục
      import React from 'react';
      import { Button } from 'primereact/button';
      
      export const Todos = [] => {
          return [
              
      ] }
      0.

    /package.json

    {
      "name": "ReactMySQLProject",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "server": "node app.js",
        "client": "npm run start --prefix client",
        "dev": "concurrently \"npm run server\" \"npm run client\""
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "concurrently": "^5.0.0",
        "express": "^4.17.1"
      }
    }

    • Chỉnh lại file
      {
        "name": "todos-list",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@testing-library/jest-dom": "^5.16.1",
          "@testing-library/react": "^12.1.2",
          "@testing-library/user-event": "^13.5.0",
          "bootstrap": "^5.1.3",
          "primeicons": "^5.0.0",
          "primereact": "^7.1.0",
          "prop-types": "^15.8.1",
          "react": "^17.0.2",
          "react-bootstrap": "^2.1.1",
          "react-dom": "^17.0.2",
          "react-scripts": "5.0.0",
          "react-transition-group": "^4.4.2",
          "style-loader": "^3.3.1",
          "web-vitals": "^2.1.3"
        },
        "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"
          ]
        }
      }
      
      4 như sau [chú ý là file bên trong thư mục gốc, không phải bên trong thư mục
      import React from 'react';
      import { Button } from 'primereact/button';
      
      export const Todos = [] => {
          return [
              
      ] }
      2 nhé].
    • {
        "name": "todos-list",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@testing-library/jest-dom": "^5.16.1",
          "@testing-library/react": "^12.1.2",
          "@testing-library/user-event": "^13.5.0",
          "bootstrap": "^5.1.3",
          "primeicons": "^5.0.0",
          "primereact": "^7.1.0",
          "prop-types": "^15.8.1",
          "react": "^17.0.2",
          "react-bootstrap": "^2.1.1",
          "react-dom": "^17.0.2",
          "react-scripts": "5.0.0",
          "react-transition-group": "^4.4.2",
          "style-loader": "^3.3.1",
          "web-vitals": "^2.1.3"
        },
        "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"
          ]
        }
      }
      
      6 server chạy bằng lệnh này.
    • {
        "name": "todos-list",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@testing-library/jest-dom": "^5.16.1",
          "@testing-library/react": "^12.1.2",
          "@testing-library/user-event": "^13.5.0",
          "bootstrap": "^5.1.3",
          "primeicons": "^5.0.0",
          "primereact": "^7.1.0",
          "prop-types": "^15.8.1",
          "react": "^17.0.2",
          "react-bootstrap": "^2.1.1",
          "react-dom": "^17.0.2",
          "react-scripts": "5.0.0",
          "react-transition-group": "^4.4.2",
          "style-loader": "^3.3.1",
          "web-vitals": "^2.1.3"
        },
        "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"
          ]
        }
      }
      
      7 client chạy bằng lệnh này.
    • {
        "name": "todos-list",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@testing-library/jest-dom": "^5.16.1",
          "@testing-library/react": "^12.1.2",
          "@testing-library/user-event": "^13.5.0",
          "bootstrap": "^5.1.3",
          "primeicons": "^5.0.0",
          "primereact": "^7.1.0",
          "prop-types": "^15.8.1",
          "react": "^17.0.2",
          "react-bootstrap": "^2.1.1",
          "react-dom": "^17.0.2",
          "react-scripts": "5.0.0",
          "react-transition-group": "^4.4.2",
          "style-loader": "^3.3.1",
          "web-vitals": "^2.1.3"
        },
        "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"
          ]
        }
      }
      
      8 chạy kết hợp giữa server và client bằng lệnh này.

    /client/package.json

    {
      "name": "client",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "react": "^16.10.2",
        "react-dom": "^16.10.2",
        "react-scripts": "3.2.0"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "proxy": "//localhost:4000"
    }

    • Chỉnh lại file
      {
        "name": "todos-list",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@testing-library/jest-dom": "^5.16.1",
          "@testing-library/react": "^12.1.2",
          "@testing-library/user-event": "^13.5.0",
          "bootstrap": "^5.1.3",
          "primeicons": "^5.0.0",
          "primereact": "^7.1.0",
          "prop-types": "^15.8.1",
          "react": "^17.0.2",
          "react-bootstrap": "^2.1.1",
          "react-dom": "^17.0.2",
          "react-scripts": "5.0.0",
          "react-transition-group": "^4.4.2",
          "style-loader": "^3.3.1",
          "web-vitals": "^2.1.3"
        },
        "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"
          ]
        }
      }
      
      9 để khai báo thêm proxy nhận port 4000 từ server:

    Tới đây ta đã liên kết chạy được đồng thời Server và Client rồi [bằng cách chạy lệnh
    npm install -g create-react-app
    0], tuy nhiên chúng ta vẫn chưa liên kết dữ liệu được, xem tiếp bên dưới để xem dữ liệu được liên kết như thế nào nhé.

    • Gọi API từ Project React
    • Ta sẽ lấy dữ liệu từ API bằng dữ liệu JSON, gửi sang project React, tuy nhiên để xử lý các thao tác HTTP REQUEST như các phương thức
      npm install -g create-react-app
      1,
      npm install -g create-react-app
      2,
      npm install -g create-react-app
      3,... chúng ta cần cài đặt thư viện Axios để hỗ trợ.

    Ta lần lượt tiến hành các bước như sau:

    /app.js

    const express = require['express'];
    const app = express[];
    
    app.get['/api/test', [req, res] => {
      res.json[{ message: 'I am a message from Server!'}];
    }]
    
    app.listen[4000, [] => console.log['App listening on port 4000']];

    Chỉnh lại nội dung file

    npm install -g create-react-app
    4 để gửi một dữ liệu JSON như sau:

    Cài đặt thư viện Axios bằng lệnh:

    /client/src/app.js

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import axios from 'axios';
    
    class App extends Component {
      state = {
        message: ''
      };
    
      componentDidMount[] {
        axios.get['/api/test']
             .then[result => this.setState[{ message: result.data.message }]]
      };
    
      render[] {
        return[
          

    { this.state.message }

    • Tới đây khi chạy dòng lệnh
      npm install -g create-react-app
      0, ta sẽ thấy được dữ liệu từ API đã được gửi tới project React.
    • Tới đây là xong rồi đó, các bạn có thể download source code React Server and Client về để test thử nhé.

    Bài Viết Liên Quan

    Chủ Đề