Can I combine material-ui components with non-mui components without problems ? Are they compatible ?
If not, why not ?
In general there are no obstacles to use in one app bouth Material-UI and other Components. The only thing you need to take in mind that mui components need to be wrapped into MuiThemeProvider, so you need to organize your app structure to cover them all.
An additional issue may occur if you're going to create the themable app. You'll find that your non-mui components don't follow theme colors. In that case you can try to use react-theme-provider which solves common issues about it.
Usually ui components can work pretty well together. I know that some material ui component werent composable you had to pass props to customize them instead of putting component as childs but they have been working on that and you can customize with your own components more and more.
Related
There is a full feature set with Styled Components when developing in React. It seems you don't get the full experience in react-native.
These limitation aren't really specified anywhere. What are the exact limitations?
I know selectors is one of them.
Dug around on this for a while and found a good response in a GitHub issue. #Andus in the comments is correct. Styled Components simply works within the bounds of React Native flavored CSS.
There are no pseudo elements in React Native 😅 Similarly you won't be able to use:
Any unsupported positioning
Some transforms don't have transformations afaik
Child / Children / Sibling selectors
Media queries or other at rules
Sorry about that! React Native is very focused on their style system, in the sense that they don't support full CSS but only CSS-like StyleSheets, so all that is done on RN in styled-components is some thin conversions to StyleSheets.
We are developing an application in React which has components like Input, Select, Accordion etc which can be re-used in a lot of other projects in our organisation to maintain a consistency.
We are using Material-UI styles to style our components using Javascript rather than CSS so that when other developers reuse the components they don't override the existing styling with CSS.
However, we have realised that the build time is long and when the components will be re-used in all the other projects,they will have a dependency on Material-UI which we don't want.
Can you guys please suggest on what is the best approach to maintain such application which can be re-used elsewhere and the best way to maintain the styles?
I need a frontend UI for my react web application and I was looking to Material UI and Reactstrap. Which one do you think is better and easier for begginers to understand? Also are there any tutorials for either them because I found both of their documentations confusing.
I am confused about how to incorporate the components and than customize them as well
About customizing them, there is a section explaining about it and they provide examples as well.
You only need to import the component you want and plug it to your React apps just like regular React component.
As for API part on Material UI, most of them consist of 3 parts (Props, CSS API, Demos) for each component. The props section provide you with all the available props for the corresponding component. For example the Button props API, it list all the available props you can provide for the Button component
CSS API section is the section you would want to look for when you want to customize the component, it list all the available keys for you to override, in my opinion it's best to look at the corresponding component implementation before customizing it because I find it a bit tricky. The source are available for public on their Github repo
I recently heard that there is a component called styled component in ReactJS. This question was asked me during one of my interview.
If anyone has an idea, kindly explain.
Traditionally you'd do the styling of your react app using css or a preprocessor like SASS or LESS. An alternative, that is becoming more popular recently, is to place the styling of your components within your JS.
Styled Components is one of the many packages that enable you to do this: https://www.styled-components.com/
Other examples include cssinjs: http://cssinjs.org/ or glamorous: https://glamorous.rocks/
Is there any recomended way how to style third-party components such as react-paginate
with Material-UI primitives (bars, buttons)?
Is it possible at all?
One of the best ways to do this today is use styled-components. These allow you to pass in any 3rd party component and style them to your needs. Here is any example of how to do this with antd. Would be similar for you, except using Material UI components.