I use Material-ui-pickers in my react project. I use v2.2.4, becouse of Material ui v3 used in my project template. Everything is fine, but i cannot localize it. I follow the example
https://material-ui-pickers-v2.dmtr-kovalenko.now.sh/localization/moment
I import moment/locale/pl
and then globally set
moment.locale('pl')
but console.log still shows locale is 'en' and picker didn't change
Pass moment instance to the MuiPickersUtilsProvider libInstance prop
Make sure you are using lib npm i #date-io/moment moment instead of pure moment lib.
Post your code to smooth the solution.
Related
I'm using react-native-vector-icons in my React Native app, and have the following component:
<Icon
name='rowing'
/>
I used the rowing icon because that was the first example in the documentation here. When you don't supply a value for type, it defaults to material, so I figured I could replace rowing with any of the material icons from this list. When I replaced it with back_arrow, it renders as a question mark. Does anyone know how I can approach debugging this?
If you are using an ejected project make sure that you bundle the library correctly in the android studio here are the full instructions
Otherwise, if you are using expo make sure to use the correct library:
Expo lib
Checklist
Have you done, npm install react-native-elements
As mentioned here, https://react-native-elements.github.io/react-native-elements/docs/getting_started.html
Please cross check in package.json file do u have dependency of "react-native-elements"
Context
New electron user here. I just cloned and installed the recommended React + Electron repo: https://github.com/electron-react-boilerplate/electron-react-boilerplate
Now I want to use Material-UI. So I thought I just follow the instructions here:
https://material-ui.com/getting-started/installation/
After I did this, the app doesn't show me anything from Material-UI. I created a Component with a simple App Bar. But it does show nothing.
So I found out that there is another package.json in the folder /app/package.json
I cd'd into it and redid the installation. Restart the dev server but still nothing shows up (no appbar, just white screen).
Here is a screenshot:
Also according to the docs I should add a link for the roboto font to the html file. Where is this supposed to go? I put it into the only html file I found in app/app.html.
How can one set up Material-UI with Electron or rather this specific boilerplate?
I couldn't find anything up to date for this question.
I found the error. Turns out I imported MenuIcon but material doesn't export it. So when I get rid of it, the appbar renders correctly.
When i customize vscode source code, i found it hard to add a page.
I know there are many ways to do so, such as Part/Widget/Browserwindow, but only if i new a Browserwindow can i explicitly load html and js files like in chrome browser and it's friendly.
If i use a Part or a Widget, i need to use native js api to do dom manipulation, and it's so inefficient,
~~so i want to know how did vscode team decide to use no ui framework during the development? Is there some trade-off?~~
i tried to import react and react-dom directly in my own contrib file /vs/workbench/contrib/dialog/browser/dialog.ts, and then get successful compilation and the react component shows up, but i don't know how to add babel with the compilation procedure, so i use react without jsx.
so i want to know how to import react framework into vscode source code project to create ui component? Is there some practices?
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.
I need to use respectively the default iOS and Android Picker in a React web app. I've found a Picker component in React Native which apparently does what I need: https://facebook.github.io/react-native/docs/picker.html Is there any way to import the component in React? Alternatively is it possible to toggle the default picker within React?
There is a project on Github to do exactly what you want called react-native-web which can be found at: https://github.com/necolas/react-native-web
I looked through the repository and found it has the component you want to use.