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
Related
How do I properly change the height of React Material UI v4 Textfield?
The following code messes up the label. Looking for a simple and easy method.
export const useTextFieldStyles = makeStyles({
root: {
minHeight: '42px',
},
});
<TextField
{...params}
margin="dense"
value={listItem}
InputProps={{
classes: {
input: textFieldStyles.root,
},
}}
/>
Referring to this link: Set TextField height material-ui
You can do this with changing style of mui component in your style classes like this
MuiInputLabel-outlined.MuiInputLabel-shrink
{
padding: .3rem !important;
transform: translate(-14px, -14px) scale(0.7) !important;
}
You can change my params
<Button component={Link} variant="text" to={link.path} sx={{ color: "#fff",'&:hover':{transform: 'translateY(-0.25em);'}}}>{link.label}</Button>
This is what I have tried so far with no sucsess
Is it possible to have &:hover in sx or do I have to create a style class in MUI?
Yes, you can use pseudo-selectors in the sx prop
Per MUI documentation
Superset of CSS
As part of the prop, you can use any regular CSS too: child or pseudo-selectors, media queries, raw CSS values, etc. Here are a few examples:
Using pseudo selectors:
<Box
sx={{
// some styles
":hover": {
boxShadow: 6,
},
}}
>
How can i override this css of material ui ? i want to change de color to : white, becouse when i try to write on my TextField the color is black
If you want just the text color to be white
You can add sx prop for the TextField.
<TextField
variant="outlined"
sx={{
'& .MuiInputBase-input': {
color: 'white',
},
}}
/>
If you want to customize the default MUI theme
Import createTheme and ThemeProvider.
import { createTheme, ThemeProvider } from '#mui/material/styles';
Override theme.
(You can go to https://mui.com/customization/default-theme/ and find exactly what to override.)
const theme = createTheme({
palette: {
common: {
white: '#FFFAFA'
},
}
})
Wrap Your Components or the TextField with ThemeProvider.
<ThemeProvider theme={theme} >
<TextField
variant="outlined"
sx={{
'& .MuiInputBase-input': {
color: 'white',
},
}}
/>
</ThemeProvider>
The color 'white' in the TextField will be the white color that you customized.
You can also define a color palette for the application.
Refer mui.com/customization/theming for more details.
Here is a youtube Tutorial for this
https://www.youtube.com/watch?v=xIIJfmDnvPE&ab_channel=TheNetNinja
If your custom style is overridden by Material UI you can just add !important; after each one of your custom styles.
You can the sx on the props of the object:
<TextField id="outlined-basic" sx={{background:'red'}} label="Outlined" variant="outlined" />
follow the link to see the props of sx: https://mui.com/system/the-sx-prop/
See the docs for overriding nested component styles.
For TextField that would be:
<TextField
variant="outlined"
sx={{
'& .MuiInputBase-input': {
color: 'white',
},
}}
/>)
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.
I'm trying to implement an Accordion component with Material UI.
The problem I'm facing is that a gray line is automatically inserted above the component although I prefer white background. How can I remove it? Here is demo code.Material UI accordion component demo
With the release of Material-UI v5.0.0-beta.0, custom styling has become much easier via use of the new sx prop.
The sx prop may be used on all Material-UI components as of v5. In our world, this has eliminated the need for hack-ish style overrides and custom classes.
Here's how to remove the "line above the accordion" with the sx={} prop.
return (
<Accordion
disableGutters
elevation={0}
sx={{
'&:before': {
display: 'none',
}
}}>
<AccordionSummary expandIcon={<ExpandMore/>}>
...your summary here...
</AccordionSummary>
<AccordionDetails sx={{ maxWidth: '480px' }}>
...your details here...
</AccordionDetails>
</Accordion>
);
Note that I've passed the sx prop to <AccordionDetails/> as well.
You must pass an object to sx so you're always going to have a double set of curly braces...
sx={{ borderBottom: '1px solid #dddddd', borderRadius: '4px' }}
To make gray line white you have to override the css classes of Accordion element.
The grey line comes from .MuiAccordion-root:before style. So at first change Accordion props adding classes props like:
...
<Accordion
elevation={0}
classes={{
root: classes.MuiAccordionroot
}}
>
...
And then on your useStyles add:
MuiAccordionroot: {
"&.MuiAccordion-root:before": {
backgroundColor: "white"
}
}
and grey line becames white. Here your code modified.
Try adding some css file and access this class MuiAccordion-root:before and change it's height to 0px. It's the pseudo-element that's showing the gray line above the Accordian.
// in my TS project i did it like this:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
test: {
'&:before': {
display: 'none',
},
);
<Accordion
classes={{
root: classes.test,
}}
expanded={expanded}
>
To remove line between Accordion summary and Accordion details you just need to pass borderBottom='none !important'
const useStyles = makeStyles({
Summary:{
borderBottom:'none !important'
});
const AccordionComp=()=>{
const classes = useStyles();
return(
<Accordion>
<AccordionSummary className={classes.Summary}>
......
</AccordionSummary>
<AccordionDetails>......</AccordionDetails>
</Accordian>
)}
export default AccordionComp;
You can wrap the Accordion component in a div and it will remove the line. It comes from a :before property that I imagine is helpful when you have more than one in a row to visually divide.