I'm trying to adjust the first option to be centered in the option in the React Select but nothing it is working for that ( all other adjustments in the CSS of React Select it is working). here the code that I'm using in the option values:
const option = (provided, state) => ({
...provided,
background: state.isSelected ? theme.colors.green600 : theme.colors.white,
color: state.isSelected ? theme.colors.white : theme.colors.grey500,
display: 'flex',
fontFamily: 'CircularStd',
lineHeight: '18px',
fontSize: '14px',
':nth-child(0) ': {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
textTransform: 'uppercase',
},
});
obs: the option it is inside of customStyles, and I'm passing into the Select, like styles={customStyles}
In order to style the first option you may want to target the :first-child of the MenuList. Here is the example
const styles = {
menuList: (provided, state) => {
return {
...provided,
"& :first-child": {
textAlign: "center"
}
};
}
};
Live Example
Related
How do you align items to the left and the right in React Native?
Whatever combination of flexbox properties I try, the two sets of text are stuck next to each other like this:
How do you make it so "Sign In" is on the right side of the screen and Repositories on the left?
Here is my code:
import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight,
paddingLeft: 10,
paddingBottom: 20,
backgroundColor: 'grey',
},
text: {
fontSize: 20,
color: 'white',
fontWeight: 'bold'
},
linkText: {
color: 'white',
},
nesteddivleft: {
flex: 1,
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
},
nesteddivright: {
flex: 1,
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
},
scrollbar: {
display: 'flex',
justifyContent: 'space-between'
}
});
const AppBar = () => {
return <><View style={styles.container}>
<ScrollView style="scrollview" horizontal>
<View style={styles.nesteddivleft}><Link to="/"><Text style={styles.text}>Repositories</Text></Link></View>
<View style={styles.nesteddivright}><Link to="/signin"><Text style={styles.linkText}>Sign In</Text></Link></View>
</ScrollView>
</View>
</>
};
export default AppBar;
App:
import Main from './src/components/Main'
import { StatusBar } from 'expo-status-bar';
import { NativeRouter } from 'react-router-native';
export default function App() {
return (
<>
<NativeRouter>
<Main/>
</NativeRouter>
<StatusBar style="auto" />
</>
);
}
As you can see, I have tried putting justify-content: space-between on the parent div and that does nothing.
I also tried this solution and it has done nothing: Aligning elements left, center and right in flexbox
import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight,
paddingLeft: 10,
paddingBottom: 20,
backgroundColor: 'grey',
display: "flex",
justifyContent: "space-between",
minWidth: '100%',
flexDirection: "row"
},
text: {
fontSize: 20,
color: 'white',
fontWeight: 'bold'
},
linkText: {
color: 'white',
},
nesteddivleft: {
},
nesteddivright: {
},
scrollbar: {
}
});
const AppBar = () => {
return <><View style={styles.container}>
<View style={styles.nesteddivleft}><Link to="/"><Text style={styles.text}>Repositories</Text></Link></View>
<View style={styles.nesteddivright}><Link to="/signin"><Text style={styles.linkText}>Sign In</Text></Link></View>
</View>
</>
};
export default AppBar;
Steps to solve issue:
Take out the scrollview component.
set Display to flex, justify Content to space-between, minWidth to 100% AND flex Direction to Row in parent component.
Not optimal as I need the Scrollview component in there as well, I will need to find a solution that allows me to have that component as a child.
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 was using material-UI, but then I decided to migrate to MUI. Which I found was complicated change because.
Material UI format
import { makeStyles } from "#material-ui/core";
export const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
// alignItems: 'center',
width: '100%',
position: 'relative',
// backgroundColor: '#C2C2C2',
// marginTop: '700px',
height: theme.spacing(65)
// color: 'white',
// justifyContent: 'space-between'
},
}));
TO
MUI Format
import { makeStyles } from '#mui/styles';
import { styled } from '#mui/material/styles';
export const useStyles = () => ({
Root: styled('div')(({theme}) => ({
height: theme.spacing(10),
display: 'flex',
alignItems: 'center',
width: '100%',
position: 'relative',
color: 'white',
justifyContent: 'space-between',
[theme.breakpoints.down('xs')]: {
// justifyContent: 'center'
padding: '0 10px 0 10px'
}
})),
Logo: styled('div')(({theme}) => ({
display: 'flex',
alignItems: 'center',
gap: '1em',
letterSpacing: '0.5em',
"& h4": {
fontSize: '1.8em'
},
[theme.breakpoints.up('sm')]: {
marginLeft: '2em',
}
})),
})
Which is fine, but the problem is that earlier, I had some components like this.
<AnimeLogoWhite className={classes.logoIcon} />
Now, this component simply took the class logoIcon and applied it.
logoIcon: {
height: theme.spacing(6),
position: 'relative',
// iphone SE custom breakpoint
[theme.breakpoints.down(325)]: {
height: theme.spacing(5)
}
},
AnimeLogoWhite.tsx
import { FC } from 'react';
import whiteLogo from '../../../public/arkAnimeLogoWhite.svg';
interface Props {
className: string
}
export const AnimeLogoWhite: FC<Props> = ({className}) => {
return(
<img className={className} src={whiteLogo.src} alt='' />
)
}
I can't do this further with MUI.
Can anyone help me on how to achieve something similar?
In my material-ui component, I want to create an ellipsis when my Typography element overflows. I created these styles ...
const styles = (theme) => ({
root: {
textAlign: "left",
margin: theme.spacing(2),
paddingBottom: theme.spacing(1),
color: theme.color.secondary,
},
cardHeader: {
paddingBottom: theme.spacing(0),
},
cardContent: {
paddingBottom: theme.spacing(1),
},
rowBody: {
width: "100%",
flexWrap: "nowrap",
alignItems: "center",
display: "flex",
},
halfRow: {
width: "50%",
},
address: {
"& .MuiTypography-h5": {
textOverflow: "ellipsis",
overflow: "hidden",
},
}
and I applied the "address" class to my Typography element like so
<Typography variant="h5" className={classes.address}>
<a href={`https://www.google.com/maps/dir/"${location}"`}>{location}</a>
</Typography>
However, the ellipsis is not appearing and the element is wrapping
What else do I need to do to apply a style to my Typography element?
Your address class should be added to the parent of the Typography component else the style chaining won't work.
address: {
"& .MuiTypography-h5": {
textOverflow: "ellipsis",
overflow: "hidden",
},
}
What it means is that find a class .MuiTypography-h5 inside address class and apply the style but there isn't any.
Also I recommend you use makeStyles to create styles.
const styles = makeStyles(theme => ({
address: {
"& .MuiTypography-h5": {
textOverflow: "ellipsis",
overflow: "hidden"
}
}
}));
export default function App() {
const classes = styles();
return (
<div className={classes.address}>
<Typography variant="h5">
126 Phillips Key Suite 042 West Kentucky
</Typography>
</div>
);
}
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]} />