search

myxvisual / react-uwp

📱⌨ React Components that Implement Microsoft's UWP Design & Fluent Design.
https://react-uwp.com
MIT License
1.18k stars 78 forks source link

Problems of react-uwp in Electron. #47

Closed zenaway closed 6 years ago

zenaway commented 6 years ago

I would like to use this design ui. So I applied it according to the guide for my electron project. The background image works well for photos, but the components have no css at all.

So when I applied it to the React test project for testing, the code and method are the same but very well applied. As a result of comparing the two projects, we found that the style tag added to the head part of the resulting html code is not added. I do not know if I've applied it to other electron projects, but the problem has not been solved.

I wonder if there is any way to solve this problem. The electrons used are electron-react-boilerplate and electron-react-webpack-boilerplate.

zenaway commented 6 years ago

I found a way to solve the problem. You can modify some of these styles / StyleManager.js files.

A function called setupStyleElement is declared. if (IS_NODE_ENV_1.default){ return; }      You can either comment out the syntax or It sets the useInlineStyle of the getTheme options to true. But using useInlineStyle seems to have a side effect that looks a bit strange.

Perhaps the syntax is for SSR. However, because of this, it does not operate normally in the electron environment, so it seems necessary to modify the syntax for Electron-React.

zenaway commented 6 years ago

Additional content. In addition to annotating the node check logic mentioned above for electron, you will need to add userAgent: "chrome" to the getTheme option in order to be displayed normally.

It will help everyone who wants to apply react-uwp to the electron.

xmuskrat commented 5 years ago

Maybe some of these suggestions should get sent over to the react-uwp team.