How can I use the new MUI look & Feel? - reactjs

A simple question, but can't find the way.
How can I install mui and use the theme / look and feel showed in the mui homepage?:
Here new look and feel material ui screnshoot
because, after create my project and install mui using:
npm install #mui/material #emotion/react #emotion/styled
I see the classic material design like this:
Here current classic material design example buttons

As of now you can't (at least without buying any custom theme from the store).
They use their internal custom theme built over MUI, if you go inside the MUI landing page and scroll down you can switch between their custom theme and the standard one.

Related

How to extend the icon library with custom icons

I am using icons from #material-ui/icons in my React projects and I need to extend it with a set of custom icons. I would like to provide this set as a shared package available via a private NPM repository, the same way material-ui icons are provided. What is the best approach to do this?
I found this blog post:
http://nicolasgallagher.com/making-svg-icon-libraries-for-react-apps/
The author uses scripts similar to the material-ui/icons scripts to generate .js/.d.ts from .svg, and reproduce what their build is doing. Is that the correct way?
I saw that the builder script of material-ui/icons accepts an argument for the path where the .svg are located, and it makes me wonder if I shouldn't use this somehow.
If you are building packages of icons for react apps, can you comment on how you are building them?
Best regards

Install specific react-bootstrap component class only?

I am new to building websites with react bootstrap and very recently I used node to install the react-tabs component. I would like to do the same for react-bootstrap/Carousel without installing other react-bootstrap classes and components (as I don't want the css to interfere with existing css in my project as I am using many similar classes as the react-bootstrap library). Please guide me on how to do this. thanks!

Can we implement Sass in Semantic UI

Regarding Semantic UI and Sass, as stated in Coderwall; Notable drawbacks of Semantic UI is stated as
Some Cons
1. No image slider
2. No thumbnail classes
3. No visibility classes
4. No SASS (does have LESS)
5. Not at a release >1.0
Can we really not implement Sass in latest Semantic UI version?
One possible way is to achieve this using npm Library.(semantic-ui-sass)
npm i semantic-ui-sass
For better understanding please follow the below reference:-
semanti-ui-sass.

I need to add search-bar in navigation toolbar for website

I am working on project and using material-ui#next i.e v1.x.So, which dependencies I need to install.
Since you already installed material-ui#next so you no need to install any other modules. You can acheieve search bar with material-UI Autosuggest component. Check the below link
https://material-ui-next.com/demos/autocomplete/

Can I use react-select in react-native?

I'm trying to implement a search form, in my react-native app. For it, I need something like react-select or select-2, both tools are made for web systems and I don't know if is a good idea to use it for a react-native app.
I already tried to install and use it in react-native but this does not appear to work.
You can't use select2 or react-select with react-native, because it's DOM based and so, it will work only in navigator, not in react-native
The closest react-native equivalent I've found is react-native-multiple-select, you can find it on github at https://github.com/toystars/react-native-multiple-select or install it with
npm i react-native-multiple-select
Probably the closest to what you want that comes bundled with React Native is http://facebook.github.io/react-native/docs/picker.html
The Picker component will give you a tumbler thing on iOS and a dropdown on Android
Alternatively maybe this 3rd party component is closer to what you want: https://github.com/bulenttastan/react-native-list-popover
From How to use React native select box

Resources