GithubHelp home page GithubHelp logo

Comments (20)

arielweinberger avatar arielweinberger commented on May 21, 2024 5

Good to know, but I'd still expect it to work with plain React.

An acknowledgment from the maintainers would be appreciated.

from themes.

maciWils avatar maciWils commented on May 21, 2024 2

I poked around this issue a bit more today and found that my issue might be a bit different than what was described, but it is in the same vein. Please refer to this boilerplate Electron app repo for my example.

ISSUE 1: Theme and Theme Panel don't apply styles from @radix-ui/themes/styles.css
I made a boilerplate electron app and installed Radix themes. I then put the <Theme> tag in the root of my app (tried both in App.tsx and index.tsx and it didn't make a difference). I then added <ThemePanel/> to see if the panel would show up. When I did this, the panel was showing, but @radix-ui/themes/styles.css was not applying any styles to it. Upon inspecting <Theme> I noticed that the parameters I had passed into <Theme> were still the default and did not match the parameters I gave.

RESOLUTION 1
I copied everything in @radix-ui/themes/styles.css into a new css file called radixThemes.css in my render directory, and was able to get the css to apply to everything under the <Theme> tag and <ThemePanel/> displayed with styling. This suggests there may be a problem with the importing (at least in Electron). There is a note in Electron that suggests using ~ in front of css imports should be used when the css file is in node_modules, but this throws an error, so I did not end up doing that.

ISSUE 2: Dark mode broken
Once I got the styling to apply, I noticed that dark theme was having some issues. I passed in appearance='dark' into my <Theme> tag, and opened up the inspector to find that light-theme was applying. In the ThemePanel, clicking the Dark Theme button glitched out and dark theme would not select or apply.

RESOLUTION 2
In my index.ejs file (equivalent to index.html in non-Electron) I changed my body tag to use the dark class: <body class='dark'> and this solved the issue. But, this means I can't toggle between light and dark theme without adding extra handling.

CONCLUSION:
My fixes worked in Electron, but they are a temporary way around this issue. Any time Radix's styles.css changes, I will have to re-copy the entire css file into my native one. I also will need to add handling for light and dark mode to apply in <body>. I am not getting warnings like others, however I was experiencing lack of styling and functionality with <Theme> rendering it unusable. Not sure if these solutions can help others in the mean time, but I hope this helps! I can't tell how much of this is related to Electron and how much is related to import issues.

from themes.

reezpatel avatar reezpatel commented on May 21, 2024 2

Extending on @maciWils comment, here is my approach that worked for me, so I basically created an HOC to wrap Theme component… It seems to work for my use case. I am not sure if there is any side effect, I guess not.

main.ts

import '@radix-ui/themes/styles.css';

theme-provider.tsx

/* eslint-disable react/jsx-no-useless-fragment */
import { Theme } from '@radix-ui/themes';
import { WithChildren } from './types.js';
import { ThemeProps } from '@radix-ui/themes/dist/cjs/theme.js';
import { useEffect } from 'react';

export const ThemeProvider: React.FC<WithChildren & ThemeProps> = ({ children, ...props }) => {
  useEffect(() => {
    switch (props.appearance) {
      case 'light': {
        if (document?.body) {
          document.body.classList.remove('light', 'dark');
          document.body.classList.add('light');
        }

        break;
      }
      case 'dark': {
        if (document?.body) {
          document.body.classList.remove('light', 'dark');
          document.body.classList.add('dark');
        }

        break;
      }
    }
  }, [props.appearance]);

  return (
    <Theme {...props}>
      <>{children}</>
    </Theme>
  );
};

app.tsx

export function App() {
  const [appearance, setAppearance] = useState<'dark' | 'light'>('dark');

  const toggle = () => {
    setAppearance(appearance === 'dark' ? 'light' : 'dark');
  };

  return (
    // All props are passed to <Theme></Theme>
    <ThemeProvider appearance={appearance}>
      <button onClick={toggle}></button>
      <TrpcProvider>
        <AppShell />
      </TrpcProvider>
      <ThemePanel></ThemePanel>
    </ThemeProvider>
  );
}

from themes.

jagretz avatar jagretz commented on May 21, 2024 1

Thanks for sharing your problem and resolution @maciWils. I noticed the same issue importing @radix-ui/themes/styles.css and thought I could just directly reference the file from node_modules, but that also didn't appear to be working even though I can see the file is there.

FYI. I am also using a custom react + webpack setup and using an index.ejs template.

I am already importing another third-party library CSS from node-modules just fine, so I know my webpack is setup correctly for that. I am not sure why the radix styles.css isn't being imported properly and haven't been building open-source libs for a while to remember the intricacies, but I suspect it's to do with how the file is referenced in the package.json. I could be totally off on that assumption though.

For now, I am following your approach (RESOLUTION 1); manually copy the styles.css, and then ignore the file so stylelint doesn't pick it up. It's also simple enough to run a copy util during my build, but this is fine for now.

from themes.

thursdaybw avatar thursdaybw commented on May 21, 2024 1

My current workaround, that I am not happy with is similar to above:

cp node_modules/\@radix-ui/themes/styles.css app/

and then in my root ./app/index.js

import './styles.css'

instead of import '@radix-ui/themes/styles.css';..

Honestly, this is my literal first time ever using radix, like at all. And about 15 mins into using it, I was "this doesn't look right".. hopefully the maintainers will respond?

from themes.

reezpatel avatar reezpatel commented on May 21, 2024 1

Wired, check my codesandox link, it's using create-react-app and after the suggested code, it works fine.

Infact I am using same code (but it is generated from nx not cre) in our production service and haven't faced any issue.

from themes.

xalixilax avatar xalixilax commented on May 21, 2024

I have the same issue. Some components seems to work regardless of the error, but the Theme component does not.

from themes.

maciWils avatar maciWils commented on May 21, 2024

I am having the same issue. I am working with Electron and am not using Next.js. Theme component does not appear to be working, and imports like Button are unresponsive to setting the variant properties within the tag.

from themes.

needim avatar needim commented on May 21, 2024

I have created a sandbox for CRA. Could you check it out?

https://codesandbox.io/s/radix-ui-themes-cra-hvw2lk?file=/src/App.js

from themes.

needim avatar needim commented on May 21, 2024

I am having the same issue. I am working with Electron and am not using Next.js. Theme component does not appear to be working, and imports like Button are unresponsive to setting the variant properties within the tag.

I haven't tried with Electron yet. Can you create an example repository for the repro?

from themes.

thursdaybw avatar thursdaybw commented on May 21, 2024

I'm adding my "I am experiencing this too" comment.
I am stock standard, basic react app and radix-themes, nothing else. I've simplified it down and for sure that css
file just wont' load.

I have attempted an implmentation of reezpatel's solution in previous comment as plain js, but it's not seemed to make any difference in my case.

from themes.

reezpatel avatar reezpatel commented on May 21, 2024

@thursdaybw check this out https://codesandbox.io/s/radix-ui-react-demo-s9zpx2

This is using the default react boilerplate from code sandbox, which, from the looks of it, uses create-react-app. Try, downloading this and see if works.

from themes.

thursdaybw avatar thursdaybw commented on May 21, 2024

@reezpatel I have my site inside lando and not keen an setting another up.
I tried adapting that code without success.

I've been thinking about setting up next.js for a while, time to look into that then.

thanks for you help.

from themes.

thursdaybw avatar thursdaybw commented on May 21, 2024

OK. I moved on to setting up NextJS. And it works (mostly, there's a few niggly bugs) but it works much better than in plain react.

from themes.

Sebosek avatar Sebosek commented on May 21, 2024

Same here. Clean Create React App, but unfortunately, the same errors 😕

from themes.

nikasepiskveradze avatar nikasepiskveradze commented on May 21, 2024

I'm experiencing that issue too

from themes.

Pranit-Harekar avatar Pranit-Harekar commented on May 21, 2024

I am kind of experiencing a similar issue with Next.js wherein the dark theme is being replaced/ignored upon router navigation router.push("/my/path"). I will open another issue but I wanted to check if anyone is experiencing the same.

from themes.

henryStelle avatar henryStelle commented on May 21, 2024

I have created a sandbox for CRA. Could you check it out?

https://codesandbox.io/s/radix-ui-themes-cra-hvw2lk?file=/src/App.js

I just opened this sandbox and don't see any errors. Maybe the latest version fixed the issue?

from themes.

vladmoroz avatar vladmoroz commented on May 21, 2024

The source maps warnings are going to be fixed in the upcoming 3.0

from themes.

hatimbijjou avatar hatimbijjou commented on May 21, 2024

I poked around this issue a bit more today and found that my issue might be a bit different than what was described, but it is in the same vein. Please refer to this boilerplate Electron app repo for my example.

ISSUE 1: Theme and Theme Panel don't apply styles from @radix-ui/themes/styles.css I made a boilerplate electron app and installed Radix themes. I then put the <Theme> tag in the root of my app (tried both in App.tsx and index.tsx and it didn't make a difference). I then added <ThemePanel/> to see if the panel would show up. When I did this, the panel was showing, but @radix-ui/themes/styles.css was not applying any styles to it. Upon inspecting <Theme> I noticed that the parameters I had passed into <Theme> were still the default and did not match the parameters I gave.

RESOLUTION 1 I copied everything in @radix-ui/themes/styles.css into a new css file called radixThemes.css in my render directory, and was able to get the css to apply to everything under the <Theme> tag and <ThemePanel/> displayed with styling. This suggests there may be a problem with the importing (at least in Electron). There is a note in Electron that suggests using ~ in front of css imports should be used when the css file is in node_modules, but this throws an error, so I did not end up doing that.

ISSUE 2: Dark mode broken Once I got the styling to apply, I noticed that dark theme was having some issues. I passed in appearance='dark' into my <Theme> tag, and opened up the inspector to find that light-theme was applying. In the ThemePanel, clicking the Dark Theme button glitched out and dark theme would not select or apply.

RESOLUTION 2 In my index.ejs file (equivalent to index.html in non-Electron) I changed my body tag to use the dark class: <body class='dark'> and this solved the issue. But, this means I can't toggle between light and dark theme without adding extra handling.

CONCLUSION: My fixes worked in Electron, but they are a temporary way around this issue. Any time Radix's styles.css changes, I will have to re-copy the entire css file into my native one. I also will need to add handling for light and dark mode to apply in <body>. I am not getting warnings like others, however I was experiencing lack of styling and functionality with <Theme> rendering it unusable. Not sure if these solutions can help others in the mean time, but I hope this helps! I can't tell how much of this is related to Electron and how much is related to import issues.

I found the 1 solution helpful, i had the same case => i had react as the render for an electron app, and radix ui styles were not build correctly, the problem is related to imports. so i copied the styles from '@radix-ui/themes/styles.css' and put them in a css file and imported it to my renderer and it worked

from themes.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.