Hey everyone i'm trying out MUI currently and feel using the sx prop for almost every component in a excessive way feels messy. Stuff like sx={{ marginRight: '75px', my: 2, color: '#2da351'} for a button. Is there a way to seperate styling more?
Related
Similar to How to remove MUI 5 Card Action Area Default Hover State but for Material-UI V4.
I would like to remove the light grey background that occurs when hovering over the CardActionArea.
I have tried all reasonable props for the underlying ButtonBase (disableRipple, etc.)
All of the answers I've found use v5 styled components or the sx prop. Any help for v4 would be very much appreciated.
I just switched to using MUI Material UI, and this is a question about best practices.
How do I get standard MUI styled text throughout my application? Do I need to use Typography everywhere? What about text that I directly render within divs in my components? What about raw header elements?
I guess this also applies to rendering of raw elements like <a>, for example when I use Nav Links from bootstrap (I'm also using react-bootstrap for some components it provides). Is there a way to get the default MUI typography for that?
I know this is a pretty basic question, just want to wrap my head around the best practices when using this library. Thanks!
Is there a Material UI component that is like a container/box with an arrow coming out of it like tooltips can do? I'll insert a screenshot of what I'm trying to do below. The only way I can think of right now is to just use tooltip and set open to always be true, but i was hoping there was an already built component for this that i just cant find
I am pretty sure MUI doesn't have a component like that. Otherwise you should customize a Paper component, Popper or Box or style a div.
I'm using the ThemeProvider and CssBaseline in my _app.js file. It's pulling in the background color from the theme as expected.
However, on some pages, I want to override the the body background color. I was able to achieve this by wrapping my page components in a different theme and adding CssBaseline as a child but it doesn't seem like the right way to do it since I'm already using CssBaseline at the app level.
Is there a better way to do this or am I on the right path?
I think your question is a little tricky but in css file use !important to overwrite the theme or frameworks file or use inline css
I'm using Vuetify to build an app that displays local points of interest. The app uses vue2-leaflet to display the maps. Unfortunately the map pokes out of navigation drawers, dialogs, and darkener screen overlays. Here are images demonstrating it:
How can I fix it?
In my opinion if z-index needs to be changed: it's better modifying the map itself - rather than Vuetify's css which can affect other components across the app.
In the component where leaflet map is registered add
<style lang="scss">
.vue2leaflet-map {
z-index: 1;
}
</style>
This works for me using Vuetify + Vue2-leaflet (latest for today's date).
Haven't noticed any issues with other Vuetify components so far.
This is a z-index issue. Try adding the following to your CSS:
.v-navigation-drawer--temporary {
z-index: 1001;
}
You can see a working example on Codepen. I think this is the minimum z-index value that will get you the overlay that you want, but you may have to play around with it until you get the right value.
NOTE: this solution only works for navigation drawers. You'll probably have to tweak the z-index values in custom CSS separately for other types of components like dialogs. Alternatively, you might be able to find where the z-index is set in the Leaflet CSS and modify that instead. I'm more familiar with Vuetify so that's what I tweaked.