I want to override some sub-component of style in react native.like -
I have created an style CircleShapeView
const styles = StyleSheet.create({
CircleShapeView: {
width: 50,
height: 50,
borderRadius: 50/2,
backgroundColor: '#000'
},
});
I want change backgroundColor ,when i am usins this style. some thing like this.
<Image
style={backgroundColor: "#fff", styles.CircleShapeView}
...
/>
What is right way to do it?
To override the backgroundColor, you could just do this:
<Image
style={[ styles.CircleShapeView, { backgroundColor: "#fff" } ]}
...
/>
A more flexible way of overriding style would be to pass an additional style prop to your subcomponent.
You would call your subcomponent like that:
<Subcomponent passedStyle={{ backgroundColor: '#fff' }} />
Apply passed style to your image:
<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}
...
/>
To add to the other answers here, make sure that you are specifying the inherited props style AFTER the style on the component you are trying to override.
Example:
Do this:
<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}
...
/>
Not this:
<Image
style={[ this.props.passedStyle, styles.CircleShapeView ]}
...
/>
The second example will NOT override the style on the component.
Related
How can I change the root styles in Checkbox. This does not work.
<CheckboxItem
onChange={()}
checked={isChecked}
label="Show Checkbox"
classes={{ root: classes.checkbox }}
/>
className={{ root: classes.checkbox }}
is erroring out as well. Thank you.
You can do it either using the sx property like the documentation suggests:
<Checkbox
{...label}
defaultChecked
sx={{
color: pink[800],
'&.Mui-checked': {
color: pink[600],
},
}}
/>
Another way you can create a styled component:
const CheckBoxStyled = styled(Checkbox)`
root: {
"&$checked": {
"& .MuiIconButton-label": {
color: "red",
...
},
...
}
},
`;
<CheckBoxStyled checked value="TestValue" onChange={handleChange}/>
In case the above it's not a big help can you please provide some more info of what you want to change and the version of MUI and probably can send you a working sample.
I'm looking for a solution to increase the MUI Divider line thickness (stretching horizontal lines vertically, or stretching vertical lines horizontally).
I've read the documentation of MUI v5 at https://mui.com/api/divider/.
According to the API, there isn't an attribute to modify the Divider "Thickness".
I've tried different implementations of inline styles (specific to MUIv5):
<Divider sx={{height:"15px", fontSize:"50px", width:"50px", fontWeight:"bold", padding:"15px"}}/>
None of the mentioned attributes modified the "thickness" of the line.
I'm looking for a solution specific to MUI v5 Divider component. I don't want to create a Box component then implement inline sx attributes or custom classes for that Box component.
Anybody have any ideas?
You can change the CSS property border-bottom-width to modify the thiccness of the Divider:
<Divider sx={{ borderBottomWidth: 5 }} />
For vertical Divider:
<Divider orientation="vertical" flexItem sx={{ borderRightWidth: 5 }} />
styled() can also be used to create an enhanced version of Divider that supports a custom thiccness:
const MyDivider = styled(Divider)(({ thiccness, orientation }) => ({
...(thiccness !== undefined &&
(orientation === "vertical"
? { borderRightWidth: thiccness }
: { borderBottomWidth: thiccness }))
}));
<MyDivider thiccness={10} />
<MyDivider orientation="vertical" flexItem thiccness={10} />
Thats a real thicc boi
<Divider sx={{ borderBottomWidth: '45px' }} />
When attempting to use ScrollView it appears to not respect justifyContent of its parent container.
import React from 'react';
import { Text, ScrollView, StyleSheet, TextStyle, View, ViewStyle } from 'react-native';
interface TODO_TextCard {
text: string,
}
export const TODO_TextCard: React.FunctionComponent<TODO_TextCard> = (props: TODO_TextCard) => {
return <View style={styles.viewStyle}>
<ScrollView>
<Text style={styles.quoteTextStyle}>{props.text}</Text>
</ScrollView>
</View>;
}
const styles = StyleSheet.create({
quoteTextStyle: {
fontSize: 30,
fontStyle: 'italic'
} as TextStyle,
viewStyle: {
flex: 1,
borderWidth: 2, borderColor: 'red',
justifyContent: 'center',
paddingHorizontal: 10
} as ViewStyle,
});
<TODO_TextCard text={'The mind adapts and converts to its own purposes the obstacle to our acting. The impediment to action advances action. What stands in the way becomes the way'}/>
Rendered as:
Now if I remove the and just render text such as
export const TODO_TextCard: React.FunctionComponent<TODO_TextCard> = (props: TODO_TextCard) => {
return <View style={styles.viewStyle}>
<Text style={styles.quoteTextStyle}>{props.text}</Text>
</View>;
}
The Text element does respect the justifyContent:center of the parent and renders as:
Is it possible for Scroll view to be centered?
The solution that I have in mind right now is to check the length of the text and conditionally render Scroll View something like:
/** This some text length would have to be different depending on the device screen, and
* even with different device screens would still not work all the time if the text
* can have new lines in it.*/
const SOME_TEXT_LENGTH = 300;
export const TODO_TextCard: React.FunctionComponent<TODO_TextCard> = (props: TODO_TextCard) => {
return <View style={styles.viewStyle}>
{props.text.length > SOME_TEXT_LENGTH ?
<ScrollView>
<Text style={styles.quoteTextStyle}>{props.text}</Text>
</ScrollView>
:
<Text style={styles.quoteTextStyle}>{props.text}</Text>
}
</View>;
}
Which very much is not ideal, due to different device screens as well as text potentially having new lines.
The ScrollView does in fact respect the justifyContent:center of its parent. The ScrollView is placed in the center of the outer View component. But here the ScrollView takes up the whole vertical screen, so it seems like it is not centered.
Try setting <ScrollView style={{backgroundColor: 'green'}}> to see what i mean.
Try applying viewStyle or a similar styling to the ScrollView itself. Make sure that you use the attribute contentContainerStyle instead of style. This snippet works for me.
<View style={styles.viewStyle}>
<ScrollView contentContainerStyle={{flex: 1, justifyContent: 'center'}}>
<Text style={styles.quoteTextStyle}>{props.text}</Text>
</ScrollView>
</View>
I also found this article. Maybe it will also help you out.
You need to give styling to ScrollView, for styling ScrollView you can use style or contentContainerStyle prop:
style defines the outer container of the ScrollView, e.g its height and relations to siblings elements
contentContainerStyle defines the inner container of it, e.g items alignments, padding, etc
In your case you need to give contentContainerStyle to position your items for eg:
return (
<View style={styles.viewStyle}>
{props.text.length > SOME_TEXT_LENGTH ?
<ScrollView
contentContainerStyle={{
flex: 1, //To take full screen height
justifyContent: 'center',
alignItems: 'center,
}}>
<Text style={styles.quoteTextStyle}>{props.text}</Text>
</ScrollView>
:
<Text style={styles.quoteTextStyle}>{props.text}</Text>
}
</View>
);
Like the title says, I want to ask if there's a way to create a button with gradient color and an icon in React Native? I know that gradient color can't be added without an external library, so I tried this one:
https://www.npmjs.com/package/react-native-gradient-buttons
However, I can't see a way to add Icon as a props to the gradient buttons of this library. The answer doesn't have to use the library, I would just like to know a convenient way to achieve the button I described. Thanks.
You can create your own button with an icon like below
import { Ionicons } from '#expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
const GradientButton = ({ onPress, style, colors, text, renderIcon }) => {
return (
<TouchableOpacity onPress={onPress}>
<LinearGradient colors={colors} style={style}>
{renderIcon()}
<Text style={styles.text}>{text}</Text>
</LinearGradient>
</TouchableOpacity>
);
};
Usage would be
<GradientButton
onPress={() => alert('Button Pressed')}
style={{
padding: 15,
alignItems: 'center',
borderRadius: 5,
flexDirection: 'row',
}}
colors={['#874f00', '#f5ba57']}
text="Press"
renderIcon={() => (
<Ionicons
name="md-checkmark-circle"
size={20}
color="green"
style={{ marginHorizontal: 20 }}
/>
)}
/>
You will have more control over the button and change it anyway you want, you can add more props to customize it the way you want.
You can try out the demo here
https://snack.expo.io/#guruparan/gradientbutton
The above icon and gradient packages are for expo
You can use RN Vector icons and Linear gradient package as well
In the docs of the package you provided it shows an example like this:
<GradientButton
style={{ marginVertical: 8 }}
textStyle={{ fontSize: 20 }}
gradientBegin="#874f00"
gradientEnd="#f5ba57"
gradientDirection="diagonal"
height={60}
width={300}
radius={15}
impact
impactStyle='Light'
onPressAction={() => alert('You pressed me!')}
>
Gradient Button #2
</GradientButton>
Maybe try adding your icon in between the tags instead of as prop?
How to assign a color to helperText material-UI to highlight the error in TextField.I am unable to set the color to helperText in material-UI.
I tried to use MuiFormHelperText-root-406 to apply CSS
but it does not work
<Grid item xs={3}>
<TextField
label="EmailId"
name="emailId"
value={editItem.emailId}
onChange={this.editInputValue}
helperText={this.state.emailerror} />
</Grid>
.MuiFormHelperText-root-406{
color:rgba(255,0,0,0.5);
}
Add this code: add className={classes.textField} in TextField
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
'& p':{
color:'blue',
},
},
<TextField
id="standard-helperText"
label="Helper text"
defaultValue="Default Value"
className={classes.textField}
helperText="Some important text"
margin="normal"
/>
#arpita-patel's answer is correct but you should know that you can also just add this to your CSS:
.MuiFormHelperText-root {
color:rgba(255,0,0,0.5);
}
Or do it based on the parent:
.MuiTextField-root p {
color:rgba(255,0,0,0.5);
}
Each of the above worked for me. I am using Material UI 4.0.2
The best way which I found to style the helperText for the TextField component is similar to the way presented by Arpita Patel.
The only difference is that I am using the attribute classes instead of className as it has been described in Material-UI docs here
You can find there that TextField component can use only one CSS rule name called root (global class is called .MuiTextField-root).
So basically you need to use the below code to style helperText as you like:
JSX (based on your initial code example)
const classes = useStyles();
<TextField
label="EmailId"
name="emailId"
value={editItem.emailId}
onChange={this.editInputValue}
helperText={this.state.emailerror}
classes={{root: classes.textField}}
/>
STYLE via makeStyles
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
textField: {
'& p':{
/* your style for helperText here*/
}
}
})
If #ange-loron's answer didn't work, try to add !important :
.MuiFormHelperText-root {
color: rgba(255,0,0,0.5) !important;
}