search

primefaces / primereact

The Most Complete React UI Component Library
https://primereact.org
MIT License
6.81k stars 1.04k forks source link

Apollo Theme: Loads 2 versions of components (one styled & one unstyled) #7012

Closed evelingoldin closed 2 months ago

evelingoldin commented 2 months ago

Describe the bug

  1. I compiled a new css file based on the theme-base and the theme.scss file
  2. I imported the css file in the main.jsx file
  3. Unless I also import one of the PrimeReact themes (e.g. import 'primereact/resources/themes/lara-light-indigo/theme.css'), I get duplicate components and the Apollo theme doesn't actually function. If I import the PrimeReact theme, the components work as expected, but the Apollo theming is overridden by the PrimeReact theme colors.

Reproducer

https://stackblitz.com/edit/hksqoo

System Information

System: OS: macOS 14.4.1 CPU: (10) arm64 Apple M1 Max Memory: 82.38 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.2.0 - /opt/homebrew/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 10.7.0 - /opt/homebrew/bin/npm Browsers: Chrome: 127.0.6533.100 Safari: 17.4.1

"dependencies": { "@datadog/browser-logs": "^5.19.0", "@hookform/resolvers": "^3.9.0", "@ory/client": "^1.9.0", "@reduxjs/toolkit": "^2.2.5", "@splitsoftware/splitio-redux": "^1.13.0", "clsx": "^2.1.1", "dayjs": "^1.11.11", "globals": "^15.8.0", "i18next": "^23.11.4", "js-cookie": "^3.0.5", "primeicons": "^7.0.0", "primereact": "^10.6.5", "react": "^18.3.1", "react-dom": "^18.3.1", "react-error-boundary": "^4.0.13", "react-helmet-async": "^2.0.5", "react-hook-form": "^7.52.1", "react-i18next": "^14.1.2", "react-redux": "^9.1.2", "react-router-dom": "^6.23.1", "react-snowfall": "^2.1.0", "tailwind-merge": "^2.4.0", "uuid": "^10.0.0", "zod": "^3.23.8" }, "devDependencies": { "@chromatic-com/storybook": "^1.6.1", "@eslint/compat": "^1.0.1", "@eslint/js": "^9.3.0", "@storybook/addon-essentials": "^8.2.6", "@storybook/addon-interactions": "^8.2.6", "@storybook/addon-links": "^8.2.6", "@storybook/addon-onboarding": "^8.2.6", "@storybook/blocks": "^8.2.6", "@storybook/react": "^8.2.6", "@storybook/react-vite": "^8.2.6", "@storybook/test": "^8.2.6", "@testing-library/jest-dom": "^6.4.5", "@testing-library/react": "^15.0.7", "@testing-library/user-event": "^14.5.2", "@types/debug": "^4.1.12", "@types/eslint__js": "^8.42.3", "@types/js-cookie": "^3.0.6", "@types/react": "^18.3.2", "@types/react-dom": "^18.3.0", "@types/uuid": "^10.0.0", "@vitejs/plugin-react": "^4.3.0", "autoprefixer": "^10.4.19", "eslint": "^9.3.0", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-import": "^2.29.1", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "eslint-plugin-storybook": "^0.8.0", "husky": "^9.0.11", "jsdom": "^24.1.0", "lint-staged": "^15.2.5", "plop": "^4.0.1", "postcss": "^8.4.38", "prettier": "3.2.5", "storybook": "^8.2.6", "tailwindcss": "^3.4.3", "typescript": "^5.4.5", "typescript-eslint": "^7.11.0", "vite": "^5.2.12", "vite-plugin-eslint": "^1.8.1", "vite-tsconfig-paths": "^4.3.2", "vitest": "^1.6.0" },

Steps to reproduce the behavior

  1. I compiled a new css file based on the theme-base and the theme.scss file
  2. I imported the css file in the main.jsx file
  3. Unless I also import one of the PrimeReact themes (e.g. import 'primereact/resources/themes/lara-light-indigo/theme.css'), I get duplicate components and the Apollo theme doesn't actually function. If I import the PrimeReact theme, the components work as expected, but the Apollo theming is overridden by the PrimeReact theme

Expected behavior

I expect the theme to properly render components.

melloware commented 2 months ago

This community tracker is not for Premium themes. Please use the community forums instead there is a specific one for PrimeReact Templates.