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?
Related
I have a component that is an audio slider (the built in one was deprecated), to modify the range of the volume. It has a bug that the slider and thumb are always blue, and we need green. There is a stylesheet with the styles for each part of the component. When I try to apply the stylesheet to the '< input >' element, I get an error:
Error: Minified React error #62; visit https://reactjs.org/docs/error-decoder.html?invariant=62&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
which says:
The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
In all the other core components (see this list about ReactNative
View style props
the applied style.XXX works. But the '< input >' tag is not listed as a ReactNative element, so it seems I have to use a different method to style it.
Here is the code:
const AudioSlider: FC<any> = (props: any) => {
const {audioCategory, activeSlider, setActiveSlider, setVolume, volume} =
props;
return (
<View style={style.AudioSliderContainer} key={audioCategory}>
<Pressable
style={
activeSlider == audioCategory
? [
style.SliderContainer,
{borderColor: $config.PRIMARY_COLOR || '#0A8C4A'},
]
: style.SliderContainer
}
onPressIn={() => setActiveSlider(audioCategory)}>
<Text style={style.SliderText}>Max</Text>
<input
type={'range'}
className="AudioSliderInput"
style={style.AudioSliderInput}
onChange={(e) => setVolume(audioCategory, e.target.value)}
value={volume}
/>
</Pressable>
<Text style={style.AudioSliderText}>{audioCategory || 'Audio'}</Text>
</View>
);
};
and the stylesheet:
export default AudioSlider;
const style = StyleSheet.create({
AudioSliderContainer: {
width: 56,
height: 175,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 5,
},
AudioSliderInput: {
width: 100,
height: 30,
transform: 'rotate(-90deg) translateX(37px)',
borderRadius: 0,
backgroundColor: '#0A8C4A',
},
AudioSliderText: {
width: '100%',
fontFamily: 'Eurostile',
fontWeight: 'bold',
fontSize: 10,
color: $config.SECONDARY_FONT_COLOR || '#FFFFFF',
paddingTop: 10,
paddingBottom: 5,
textAlign: 'center',
display: 'flex',
justifyContent: 'center',
},
SliderContainer: {
width: '100%',
height: 'calc(100% - 30px)',
backgroundColor: '#373737',
borderRadius: 6,
justifyContent: 'space-between',
alignItems: 'center',
padding: 10,
paddingTop: 5,
borderColor: 'transparent',
borderWidth: 1,
borderStyle: 'solid',
},
SliderText: {
fontFamily: 'Eurostile',
fontWeight: 'bold',
fontSize: 9,
color: $config.SECONDARY_FONT_COLOR || '#FFFFFF',
textAlign: 'center',
paddingVertical: 5,
width: '100%',
marginRight: -2,
},
});
In my research, I found that I will also need to "cancel" the default styles for the input type="range" element using -webkit- properties, which are not recognized.
Questions:
Why the style prop is being interpreted as a string instead of a Javascript object that has the requested mappings of prop:value?
Should I switch to an external css file and import it, for the < input > element? or use style.components (which are not used elsewhere) or inline CSS perhaps?
How to be able to use -webkit-appearance: none; as part of the style?
If I have to throw everythign out and start over just to get green, which community slider should I use? Many seem to have loads of unclosed issues?
Many thanks!
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.
I would like to make semitransparent paper component of material ui.
Does anyone know that?
I tried as follows
const useStyles = makeStyles(theme => ({
paper: {
pacity: 0.5,
backgroundColor: 'transparent',
padding: theme.spacing(2),
[theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
marginTop: theme.spacing(6),
marginBottom: theme.spacing(6),
padding: theme.spacing(3),
},
},
}));
<Paper className={classes.paper}></Paper>
I thought pacity is able to make components translucent.
However, the code above makes paper components all transparent.
I have a class in React which uses an input field which is part of the website header:
If the input is invalid then I want to display a snackbar. I'm using Material-UI components.
The problem is I defined anchorOrigin to be center and top as per Material-UI API. However the snackbar takes up the whole screen width while I want it to only take up the top center location of the screen. My message is quite short, for example "Value invalid" but if it's longer then I should be able to use newlines. I'm not sure if there's some setting in Material-UI API to alter this (I couldn't find one) or I need to use CSS.
This is my code:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '#material-ui/core/InputBase';
import Snackbar from '#material-ui/core/Snackbar';
import SnackbarMessage from './SnackbarMessage.js';
const classes = theme => ({
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('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class Test extends Component {
state = {
appId: '',
snackBarOpen: false
}
render() {
return (
<div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
value={'test'} />
<Snackbar
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<SnackbarMessage
variant="warning"
message={"test message"}
/>
</Snackbar>
</div>
)
}
}
Material-UI set Snackbars to full viewport-width below the breakpoint "md" (600px).
You can use overrides (https://material-ui.com/customization/overrides/) and set new values to the default CSS classes of the component described in the components API (i.e. https://material-ui.com/api/snackbar/). So you can override the class anchorOriginTopCenter as follows:
const styles = theme => ({
anchorOriginTopCenter: {
[theme.breakpoints.down('md')]: {
top: "your value/function here",
justifyContent: 'center',
},
},
root: {
[theme.breakpoints.down('md')]: {
borderRadius: 4,
minWidth: "your value / function here",
},
},
});
The first objects overrides the default class {anchorOriginTopCenter}, the second 'root' is applied to first element in your snackbar (probably a 'div').
I do not know if we can add some style to the component anchor origin field. I think the div needs to be managed using CSS. It's an anchor, not style.
<Snakbar
className = "my-snakbar"
{/*All your other stuff*/}
>
{//Stuff}
</Snakbar>
CSS
.my-snakbar {
width: 200px;
//Maybe use flexbox for positioning then
}
Let me know your thoughts
Daniel
Improved Answer
Code copied from origional question and modified
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Snackbar from '#material-ui/core/Snackbar';
const classes = theme => ({
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('sm')]: {
width: 120,
'&:focus': {
width: 200,
},
},
}
});
class ComingSoon extends Component {
render() {
const styles = {
container: {
position: "fixed",
top: "0px",
width: "100%",
height: "30px"
},
snakbar: {
background: "black",
color: "white",
width: "100px",
height: "100%",
display: "flex",
justifyContent: "center",
alignContent: "center",
margin: "0 auto"
}
};
return (
<div className = "snakbar-container" style = {styles.container}>
<Snackbar
className = "my-snakbar"
style = {styles.snakbar}
anchorOrigin={{
vertical: 'top',
horizontal: 'center'
}}
open={true}
autoHideDuration={5000}
>
<span>My Message</span>
</Snackbar>
</div>
)
}
}
export default ComingSoon;
Screen shot:
Let me know if this helped
Daniel
Exists some way to do something like this?
const styles = StyleSheet.create({
content: {
alignItems: 'center',
flex: 1,
justifyContent: 'center'
},
mainColor: { color: '#FFFFFF' },
usernameIcon: {
{this.styles.mainColor} // <-- How import the style, instead does write the code - color: '#FFFFFF'?
},
usernameItem: {
backgroundColor: '#FF8484',
borderColor: '#FFFFFF',
paddingTop: 7
},
});
Add many classes in my components it's very verbose and I likely do something likes the code above.
There's no style inheritance syntax (like those of CSS preprocessors) in React Native.
But since it's all JS you can just do it with JS:
const MAIN_COLOR = 'white';
const someStyle = {
padding: 5,
margin: 5,
}
const styles = StyleSheet.create({
usernameIcon: {
color: MAIN_COLOR,
...someStyle,
},
generalStyle: {
backgroundColor: 'white',
}
})
// you can also combine styles in the component
// note that the latter style will override duplicated styles
<View style={[styles.usernameIcon, styles.generalStyle]} />