I want to customize the MUI Select component. Basically I just want to remove the border or rather the outline. I tried to override the styles, tried to use a NativeSelect and tried to use a customized InputBase with the Select as inputComponent but none of this worked. Any help would be much appreciated.
I followed #Bar's answer: in my case I also had to reset the box-shadow applied over the Select.
For Material v5,
<Select sx={{ boxShadow: 'none', '.MuiOutlinedInput-notchedOutline': { border: 0 } }}>
MUI exposes the disableUnderline prop in Select component. Just set it to true
The border is applied to the label of the OutlinedInput component. Edit the css rule notchedOutline of the OutlinedInput component to remove the border. https://mui.com/api/outlined-input/#css
What worked for me was to use
disableUnderline to remove the line below the selector
variant="standard" to get rid of borders, both when the selector is focused or not.
Setting '.MuiOutlinedInput-notchedOutline': { border: 0 } will only remove borders of a selector when not focused.
Related
I need to set hight of dialog, but the MUI CSS seems to get higher CSS priority.
How do I use it or override it?
I tried something like this:
<Dialog
classes={{ paper: classes.paper }}
..
..
</Dialog>
But still my class ".qdidataappseed-makeStyles-paper-..." is lower priority.
Thanks
It possible to set Dialog component height using sx properties:
<Dialog sx={{height: '100px'}}
or minHeight / maxHeight depends on what exactly we need to set.
Looking to remove this border prop in the image using inline sx prop from mui.
Its a textfield if thats important..
You could try this sx prop inside your TextField
sx={{
"& .MuiOutlinedInput-notchedOutline": {
border: "0 none",
},
}}
that's how you can find it
Here is codesandbox. I am trying to have the ability to sort by the first name and last name The default Datagrid only shows the sort icon when hovering. Is there a way I can set it to be always visible? Thanks for the help!
you can use .MuiDataGrid-iconButtonContainer. however Material-UI doesn't provided default icon for unsorted list. I have forked your demo and updated it. added icon for unsorted list too. please check codesandbox
This is what I did:
const StyledDataGrid = styled(DataGrid)(() => ({
'& .MuiDataGrid-iconButtonContainer': {
marginLeft: '2px',
visibility: 'visible !important',
width: 'auto !important',
},
}))
I created a styled component which adds some custom styling to DataGrid. Specifically to always show the icon and take up width for it. Using !important is not recommended, but doesn't harm in this case.
I must add, this only works with using custom sort icons, like so:
<StyledDataGrid
components={{
ColumnSortedAscendingIcon,
ColumnSortedDescendingIcon,
ColumnUnsortedIcon,
}}
/>
If you don't want to use custom icons, I'm sure it's doable, you just need to play with CSS bit more.
Add the below code in .scss file. (.MuiDataGrid-sortIcon is pre-defined class of Mui Datagrid). Hope it helps!
.MuiDataGrid-sortIcon {
opacity: inherit !important;
}
You can use the sx prop in DataGrid like so:
<DataGrid
sx={{
'.MuiDataGrid-iconButtonContainer': {
visibility: 'visible',
},
'.MuiDataGrid-sortIcon': {
opacity: 'inherit !important',
},
}}
In my case, I had to style both the iconButtonContainer and sortIcon make sure it's always visible.
I would like to change the color of the border of the input on focus, but not sure how to achieve it. I can change the styles the component but not when focusing. I´m using material-ui css option.
Here is the code so far:
....
<PhoneInput
country={'pt'}
localization={pt}
specialLabel={field.label}
value={phoneValue}
onChange={phone => setPhoneValue(phone)}
inputStyle={{
'&:focus': {
borderColor: 'red'
}
}}
/>
Sample:
Thanks!
You can change border color by placing a class to containerClass of PhoneInput component. That is, if you you use Material UI you can define a class as following
borderClass: {
"&.react-tel-input .form-control:focus": {
borderColor: "#69e781",
boxShadow: "0px 0px 0px 1px #69e781",
}
}
then use this class as follows
<PhoneInput
containerClass={classes.borderClass}
.
.
/>
or if you use a CSS file you can override the rule below in your CSS file
.react-tel-input .form-control:focus:
The styles on focusing the input of React-Phone-Input exists on .PhoneInputInput class on focus-visible property. In order to override this styling, access the PhoneInputInput Class.
Below example is for the devs using Material UI styled components.
".PhoneInputInput": {
"&:focus-visible": {
outline: "none",
},
}
I'm working on a react js project and i want to remove the shadows or border from the accordion component.
passing a style to your component
style={{ boxShadow: "none" }}