I am new to material ui I am trying to understand some things
I have a simple select component and I have two problems with it.
First I want to make the arrow icon of the select on the left side and not on the right
Second I want to color the input of the select in blue color but I only managed to color the dropdown values
here is what I tried
any help will be appreciated, thanks
MUI components are like packages that are made of some smaller parts. And you can change their styles by selecting their specific names in the sx props.
For example "& .MuiMenuItem-root" is for menu items, and "& .MuiSvgIcon-root" is for the little arrow icon of the Select.
By the way, to change the main things like the color of the whole thing, you only need to put that in the sx. This would be the thing you want:
<Select
fullWidth
IconComponent={ArrowDownwardIcon}
value={selected}
variant="outlined"
onChange={selectionChangeHandler}
sx={{
backgroundColor: "red",
"& .MuiSvgIcon-root": {
right: "unset",
left: "7px",
},
}}
>
You can learn about all these strings in MUI api docs or inspecting theme in your browser developer tools.
Related
I am using Mui for styling a website I am working on. I was wondering if anyone had any insight on how to style a radio button so it is completely filled with one color while selected. This has to work with Mui Radio buttons.
Let me provide an example of how it should look.
I want it to look like the first radio button. It currently looks like the 4th in Mui.
I am also needing to do this with styled components.
You can change the default icon by providing a different icon in the checkedIcon props (You can use Lens icon to achieve the first button). There are other icons as well at here. Pick the one you need
import Lens from "#material-ui/icons/Lens
return (
<Radio
value="example"
label="example"
checkedIcon={<Lens></Lens>}
/>
)
So I have something like this :
return (
//set mushroom forest background, make it fill screen
<div className="App" style={ {
backgroundImage: `url(${pools})`,
backgroundPosition: 'center',
backgroundSize: 'contain, cover',
backgroundRepeat: 'no-repeat'
}}>
I want to use both cover and contain for my background image, but it seems to choose 1 and render with it rather than applying both.
But when I render it with react, the image isn't stretched to the page. It only seems to pick up the first of either contain or cover, and use that for rendering the image. Anyone know how to make a background image do both contain and cover in react? The syntax I have there works just fine in its CSS equivalent.
I'm really trying to assign two values to a CSS style in react, using the syntax and have it work. Right now it either fills the whole page, but cuts off part of the image, or leaves white space on the sides but displays the whole image. I've found CSS tutorials using both cover and contain at the same time, is there some special syntax I need to use in react or JavaScript to make this work?
I've tried putting two styles into an array, using two strings such as ['contains', 'cover'] but that doesn't seem to work either.
Edit: Figured out a way around it, not sure if you can do this double value assignment thing is css at all, think I was mostly misreading a guide to doing something.
Trying to target a specific span that made by the material UI IconButton component. Trying to make the text accompanying some icons to be centered below the icon, but the text is instead to the right of the icon. When I manually add flex-direction: column to this span, I get the effect I want, but I can't seem to find the right way to get the style applied in my styles.js file because I can't seem to target "MuiIconButton-label" in any permutation i've tried.
Any advice?
browser console screenshot
classes={{root: classes.icons, label: classes.icons}}
was the correct method
I have a custon class inside my react js render , it's a style to make 3 buttons inline (2 on the right and one to the left) in the same line.
But the buttons are not responsive to mobile and other screens, I tried to put the style in a custom css stylesheet but it didn't work and the buttons didn't show up inline.
Here is my CodeSandBox.
Many thanks
Please check with the property flex-wrap: wrap on parentStyle. This will make the prev and next buttons move to the next line as you resize. Similarly you can use the same property in this line <div style={{ ...childStyle, justifyContent: "flex-end" }}> as well to move the next button below the prev button if the browser is resized further
Please take a look at this, I want to put each button in new line in this case :
Small screen test
They seem to line up - what is the problem?
How can I give a specific color (Let's say red) to the border of dropdown menu of Flex PopUpButton.
Also if how can I set text properties (text should be bold) of dropdown Menu of PopUpButton.
Thanks in advance
- Atul
Go to:
Flex3 Style Explorer
On the left select Buttons and select PopUpButton and you will be able to see the styles you can change for this control...
For example,
change border color with: borderColor: #ff0000;
there color with: themeColor: #ff0000;
etc...
Ladislav