I'm developing with react and MaterialUI on the front end and I have a bunch of customized inputs. Everything is working pretty well except for this one. No matter what combination of selectors I use I can't seem to point to the right one to change this black color.
Also, it'd be nice to have a clear way to identify just by looking at the element selector, to drill down into the right component. Is there anyway to do this (teach a man to fish kind of thing).Here is the image of the element when I inspect it and the color I'm trying to get at.
here is the style object:
toggleToUse = {
switchBase: {},
thumb: {
color: colorUsedByInputs,
opacity: 0.6,
marginLeft: '10.2px'
},
track: {
background: 'grey',
opacity: '1 !important',
borderRadius: 20,
position: 'relative',
'&:before, &:after': {
display: 'inline-block',
position: 'absolute',
top: '50%',
width: '50%',
transform: 'translateY(-50%)',
color: '#fff',
textAlign: 'center'
}
},
checked: {
'&$switchBase': {
color: '#185a9d',
transform: 'translateX(32px)',
'&:hover': {
backgroundColor: 'rgba(24,90,257,0.08)'
}
},
'& $thumb': {
backgroundColor: '#fff'
},
'& + $track': {
background: 'linear-gradient(to right, rgba(43, 56, 97, 0.7), #2b3861)',
'&:before': {
opacity: 1
},
'&:after': {
opacity: 0
}
}
}
};
Here is the image of the element when I inspect it and the color I'm trying to get at.
<Switch classes={{ track: classes.track }} />
track: {
'.Mui-disabled + &&': {
backgroundColor: 'hotpink',
},
},
This will work for a default MUI Switch. If needed, you can increase the specificity by adding additional & to the selector. If all fails, please provide a codesandbox and precisely state what color you want in which scenario.
Related
I'm trying to show more details and scale a component when hovered, but it displaces the surrounding components in doing so.
See screenshot:
Here's the sx I assigned to an MUI Box and Card.
const ctCardHoveredSx = {
maxWidth: 300,
'& .ct-card-toggle': {
display: 'none'
},
'&:hover .ct-card-toggle': {
display: 'flex'
},
'& .ct-card': {
transition: 'transform 0.15s ease-in-out',
boxShadow: 'none'
},
'&:hover .ct-card': {
transform: 'scale3d(1.25, 1.25, 1)',
boxShadow: '5',
zIndex: 2
}
};
Tech Stack:
NextJS
MUI
React
I think you need to use overflow hidden in the parent div and it will not displace the thing and hover will just get scale inside the same div.
Please let me know if you find any issues.
I am using react native and currently have this css code for the navigator function code
<Tabs.Navigator
screenOptions={{
tabBarScrollEnabled: true,
tabBarShowLabel: false,
tabBarActiveTintColor: 'green',
tabBarStyle: {
backgroundColor: theme.backgroundColor,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
margin: 50,
maxHeight: 50,
borderRadius: 10,
justifyContent: 'center',
...style.shadow
}
}}
>
How do I style the active blue bar selector. I would ideally just want to change the color. What is the best way to go about this. I have tried using tabBarActiveTintColor with no luck.
What I want styled
Use the tabBarIndicatorStyle: { backgroundColor: 'green' }, to change bar color in version 6 :)
please do this
tabBarOptions={{ tabBarActiveTintColor:'blue' }}
It helps you lots.
I made a simple NavBar and I overwrote the tab indicator in the following way:
indicator: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
},
<Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}>
{...}
</Tabs>
My main problem is, that I want the indicator to be a square like a border ( instead of an underline ) where I can set paddings and other related things. How can I achieve this?
firstly, i know theres a correct answer on the top but if you want another way this is another way to dot... this is not a good approach but this is what i did:
css:
//And This is for the color of the text ↓
.MuiTab-textColorPrimary.Mui-selected {
color: var(--darkGreen) !important;
}
//this is for changing the span or bottom border ↓
.PrivateTabIndicator-colorPrimary-4 {
background-color: var(--darkGreen) !important;
}
All i did was get their classnames and override/overwrite them by using the !important method on css
If it did helped you, which it did to me... Then Im Glad I helped! :)
Cheers!
In Material-UI, TabIndicator is a span, not border-bottom of some elements, so you need to remove it completely and add your own border, which removes the transition effect when switching between tabs. Also you want your border color to be gradient, so that requires a bit of work.
const useStyles = makeStyles({
indicator: {
background: "none" // remove MUI indicator
},
tabs: {
"& button": {
padding: 5 // the size of the border
},
"& button[aria-selected='true']": {
position: "relative",
"&:before": {
content: '""',
position: "absolute",
left: 0,
top: 0,
right: 0,
bottom: 0,
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", // border color
zIndex: 0
},
"& > *": { zIndex: 0 },
"& > .MuiTab-wrapper": {
background: "#fff",
height: "100%"
}
}
}
});
However, if you only want a single color for your border it becomes much easier to implement:
const useStyles = makeStyles({
indicator: {
background: "none"
},
tabs: {
"& button[aria-selected='true']": {
border: "3px solid red"
}
}
});
Usage
const classes = useStyles();
return (
<Tabs
className={classes.tabs}
classes={{ indicator: classes.indicator }}
{...props}
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
);
Live Demo
You can use this class directly on your CSS and modify the Tab Border by default
.css-1aquho2-MuiTabs-indicator {
background-color: white!important;
}
Hope it helps
Within a datacell, I wasn't able to find out how to stack text. So I created a textfield, gave it value and gave it helper text and disabled the textfield and changed the text color to black when disabled. I've been trying to figure out how to change the bottomBorder to 'none' (which is what I assume is what is being used to create the dashed line under the input value text).
This is what I have so far.
const DarkerDisabledTextField = withStyles({
root: {
marginRight: 8,
"& .MuiInputBase-root.Mui-disabled": {
color: 'black',
fontSize: '16px',
borderBottom: 'none',
}
},
underline: {
"& .MuiInputBase-root.MuiInput-outlined": {
borderBottom: 'none',
}
}
})(TextField);
This is what I used to create and style my textfield. The underline key isn't working how I have read that it should.
And this is what I have tried so far with my textfield
<DarkerDisabledTextField
title={params.data.name}
disabled
defaultValue={params.data.name}
helperText={title}
fullWidth
/>
I suggest prop solution.
<DarkerDisabledTextField
helperText="helper text"
disabled={isDisabled}
InputProps={isDisabled ? { disableUnderline: true } : {}}
/>
If you prefer withStyles way, check :before
const DarkerDisabledTextField = withStyles({
root: {
marginRight: 8,
"& .MuiInputBase-root.Mui-disabled:before": {
color: "black",
fontSize: "16px",
borderBottom: "none"
}
}
})(TextField);
Applied codesandbox
if someone uses the Mui v5 inputs with createTheme, here's what i added to components:
createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
'&.MuiInput-root.Mui-disabled': {
':before': {
borderBottomStyle: 'solid'
}
}
}
}
}
}
});
I have a MaterialUI InputBase element in my React app.
If i turn the autoComplete property on, the styles of the input get "messed up", once they are filled. I also tried the Input component, with the same problem.
I've tried overriding these pseudo elements, in my global CSS file:
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
color:white !important;
}
This has no effect, probably because the original code uses the !important keyword too, giving it a priority over mine. I cannot create an ID, which would have higher priority, because MaterialUI doesn't provide this option.
I do not have anythign special in my setup. These are the styles that are injected using WithStyles, and i doubt they have anything to do with it:
inputRoot: {
color: 'inherit',
width: '100%',
},
inputInput: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 10,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
width: 200,
},
},
inputInputQuery: {
paddingTop: theme.spacing.unit,
paddingRight: theme.spacing.unit,
paddingBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('md')]: {
width: 200,
},
},
Is there any way to get this done,without resorting to JS hacks?