I am using Next JS (v9.2) and Material-UI (4.9.0).
I imported sanitize.css (v11.0.0) in _app.js.
When I am using material-UI outlined text-field, the outline is not displayed.
On removing sanitize.css from _app.js, the outline is displayed.
Is there any way to make material-UI overwrite other CSS?
We don't need to use sanitize.css with Material UI. It already should have what it needs to provide a consistent look across multiple browsers - material-ui.com/components/css-baseline.
So I replaced sanitize.css and used . It solved the problem.
Related
I am creating a react project and I'd like to know if it's okay to use FontAwesome icons on a ReactJS project that is using MaterialUI.
I tried to use the Material UI Icons and also use FontAwesome Icons but I thought that there's a repetition.
React is completely flexible. You can use whatever you want, just don't forget about package sizes (which can get bad only in rare scenarios and certainly not with icons).
Any good examples out there of using AgGrid with React Material UI. Especially around creating custom themes. The examples on the AgGrid site are around css / scss not styled components the preferred approach with React Material UI.
Although it might not be exactly what you are looking for. Try searching for
component types and custom renderers as it contributes to customizing your ag-grid look
I am try to add some CSS to my components. However, when the website renders the custom CSS is always removed. I am styling my own pages and do not override the CSS of third parties, at least not consciously. I am using Material UI and NextJS and realised that while following this
that all server-side CSS is removed. I suspect that this is the issue, but not sure how to work around it. The CSS is just custom to the component and follows the naming convention of Next :
[filename].modules.css
Does anyone know what do do?
Please,
I want to know how to create a dump carousel in material-ui (for 3 images) since it's not predefined in material-ui ? I tried to use material-auto-rotating-carousel but it seems not easy to integrate in a simple React page.
You are correct, this feature doesn't exist in material-ui,
I will suggest to use some util for carousel
or you can use a util which provide a scrollable effect. Please check this answer - https://pt.stackoverflow.com/questions/372089/carousel-no-material-ui
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.