I am trying to make space between control switch and it's label. what property of FormControlLabel would set it correct?
my code snippet:
switchContainer: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
},
<Grid className={classes.switchContainer} sx={{ boxShadow: 2 }}>
<FormControlLabel onClick={setDarkMode} control={<Switch />} label={dark ? 'Dark' : 'Light'} labelPlacement="start" />
</Grid>
Related
My TextField input wont center. I am using mui TextField to build a form.
Can anyone help, I have been trying a few different things but I can get it to work.
<TextField
size="small"
id="username"
placeholder="Username"
type="email"
value={values.username}
error={touched.username && !!errors.username}
helperText={touched.username ? errors.username : ''}
onChange={handleChange('username')}
onBlur={handleBlur('username')}
variant="outlined"
InputProps={{ className: classes.input }}
/>
const useStyles = makeStyles(() => ({
input: {
display: 'flex',
justifyContent: 'center',
textAlign: 'center',
},
inputCenter: {
textAlign: 'center',
color: 'red',
},
}));
If you are using MUI v5 I think for text alignment you can use sx prop of mui :
<TextField
InputProps={{
sx: {
"& input": {
textAlign: "center"
}
}
}}
/>
reference : The sx prop
Or if you are using MUI v4 try :
inputProps={{
style: { textAlign: "center" }
}}
Grid No Background - centered
Material UI grid looks centered without a background.
Grid Background - not centered
When Material UI grid and grid items have a border and background, you can see they're not centered. They are closer to the left. Only the text and elements inside the grid and grid items are centered. The grid and grid items themselves are not centered.
How would one add a background to the grid so the grid still looks centered?
Codesandbox
import React, { useState } from "react";
import { Grid } from "#mui/material";
export default function GridTest() {
const [hasBackground, setHasBackground] = useState(true);
return (
<>
<div
style={{
border: "3px solid purple",
padding: "40px",
position: "relative"
}}
>
<h2
style={{
position: "relative",
top: "-50px",
color: "purple"
}}
>
div
</h2>
<h2
style={{
position: "relative",
color: "green"
}}
>
Grid
</h2>
<Grid
container
spacing={3}
style={
hasBackground
? {
background: "#bbe4c3",
border: "3px solid green"
}
: { border: "3px solid white" }
}
>
<Grid
item
style={
hasBackground
? {
color: "red",
border: "3px solid red"
}
: { border: "3px solid white" }
}
xs={6}
>
grid item
<div
style={{
color: "blue",
border: "3px solid blue"
}}
>
div inside grid Item
</div>
</Grid>
<Grid
item
style={
hasBackground
? {
color: "red",
border: "3px solid red"
}
: { border: "3px solid white" }
}
xs={6}
>
grid item
<div
style={{
color: "blue",
border: "3px solid blue"
}}
>
div inside grid Item
</div>{" "}
</Grid>
</Grid>
</div>
<button
onClick={() => {
setHasBackground(!hasBackground);
}}
>
toggle grid and grid items backgrounds/borders
</button>
</>
);
}
Add a div around the grid and give that a background instead.
Codesandbox
import React, { useState } from "react";
import { Grid } from "#mui/material";
export default function GridTest() {
const [hasBackground, setHasBackground] = useState(true);
return (
<>
<div
style={{
border: "3px solid purple",
padding: "40px",
position: "relative"
}}
>
<h2
style={{
position: "relative",
top: "-50px",
color: "purple"
}}
>
div
</h2>
<h2
style={{
top: "20px",
position: "relative",
color: "green"
}}
>
Grid
</h2>
<span
style={{
position: "relative",
color: "green"
}}
>
div
</span>
<div
style={{
background: "#bbe4c3",
border: "3px solid green"
}}
>
<Grid
container
spacing={3}
style={
hasBackground
? {
background: "#bbe4c3",
border: "3px solid green"
}
: {}
}
>
<Grid
item
style={
hasBackground
? {
color: "red",
border: "3px solid red"
}
: {}
}
xs={6}
>
grid item
<div
style={{
color: "blue",
border: "3px solid blue"
}}
>
div inside grid Item
</div>
</Grid>
<Grid
item
style={
hasBackground
? {
color: "red",
border: "3px solid red"
}
: {}
}
xs={6}
>
grid item
<div
style={{
color: "blue",
border: "3px solid blue"
}}
>
div inside grid Item
</div>{" "}
</Grid>
</Grid>
</div>
</div>
<button
onClick={() => {
setHasBackground(!hasBackground);
}}
>
toggle grid and grid items backgrounds/borders
</button>
</>
);
}
I was trying to customize my Modal with onBackButtonPress prop. To check if it worked or not, I passed a console.log to it like this:
<Modal onBackButtonPress={() => console.log('Something')}>
<NewRidesModal
//...
/>
</Modal>
But in fact, it doesn't even return anything whenever I press the Android back button.
Why is he prop not returning any value at all? Is it deprecated?
I use this library too react-native-modal and onBackButtonPress is working fine.
I face another issue, in my case onBackdropPress is not working, but after I fix my styling modal, everything working fine.
This is my example,
Modal js
import React, { Component } from 'react'
import { View, Text, Image, TouchableOpacity } from 'react-native'
import styles from '../styles/StyleComponentModalProduct'
import { withNavigation } from 'react-navigation'
import Price from '../../../assets/components/price/Price'
import Modal from 'react-native-modal'
class ComponentModalProduct extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<Modal
useNativeDriver={true}
animationIn={'fadeIn'}
animationOut={'fadeOut'}
backdropColor={'rgba(0, 0, 0, 0.7)'}
backdropOpacity={0.5}
isVisible={this.props.showProduct}
onSwipeComplete={() => this.props.close()}
swipeDirection={['down']}
style={{ justifyContent: 'flex-end', margin: 0 }}
onBackButtonPress={() => this.props.close()}
onBackdropPress={() => this.props.close()}>
<View style={styles.container}>
<View style={styles.subContainer}>
<View style={styles.headerContainer}>
<TouchableOpacity
onPress={() => this.props.close()}
style={styles.closButton}
/>
<View style={styles.containerImageProfile}>
<Image
resizeMode={'contain'}
style={styles.imageProfile}
source={{ uri: this.props.selectedProduct.foto }}
/>
</View>
<View style={styles.containerProfile}>
<View style={styles.containerTextName}>
<Text style={styles.textName}>
{this.props.selectedProduct.nama_produk}
</Text>
</View>
<Price
value={this.props.selectedProduct.harga_beli}
style={styles.textProfesi}
/>
</View>
</View>
</View>
</View>
</Modal>
)
}
}
export default withNavigation(ComponentModalProduct)
Style Modal js
import { StyleSheet, Dimensions } from 'react-native'
import { color } from '../../../assets/styles/ColorList'
import {
responsiveHeight,
responsiveFontSize,
responsiveWidth
} from 'react-native-responsive-dimensions'
const windowHeight = Dimensions.get('window').height
const styles = StyleSheet.create({
container: {
justifyContent: 'flex-end',
alignItems: 'center'
},
subContainer: {
height: windowHeight / 2,
backgroundColor: color.whiteColor,
width: '100%',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
paddingHorizontal: responsiveWidth(5),
paddingVertical: responsiveHeight(3)
},
headerContainer: {
justifyContent: 'center',
alignItems: 'center'
},
closButton: {
backgroundColor: '#E7E7E7',
height: 8,
width: 100,
marginVertical: 10
},
containerImageProfile: {
marginVertical: 10,
width: '100%',
justifyContent: 'center',
alignItems: 'center'
},
imageProfile: {
height: windowHeight / 3.5,
width: '90%',
borderRadius: 20
},
containerProfile: {
justifyContent: 'center',
alignItems: 'center'
},
containerTextName: {
marginHorizontal: responsiveWidth(10),
justifyContent: 'center'
},
textName: {
fontSize: responsiveFontSize(2.5),
color: color.fontColor,
textAlign: 'center'
},
textProfesi: {
fontSize: responsiveFontSize(2.5),
color: color.fontColor,
fontWeight: 'bold'
}
})
export default styles
I found out that onBackButtonPress is deprecated or it was actually removed. There should some more information about this on the documentation.
I have trouble aligning/justifying as centered buttons in the AppBar.
It looks like this (see demo here):
<AppBar position='sticky'>
<Toolbar>
<div className={classes.topMenuBoxes}>
<img className={classes.logoSize} src={LogoFull} alt="logo" ></img>
</div>
<div className={classes.topMenuBoxes}>
<Button className={classes.menuText} color='inherit' >Offer</Button>
<Button className={classes.menuText} color='inherit' >Join</Button>
<Button className={classes.menuText} color='inherit' component={AboutLink}>About us</Button>
</div>
<div className={classes.topMenuBoxes}>
<DropMenu />
</div>
</Toolbar>
</AppBar>
...and using this makeStyles:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
logoSize: {
marginTop: '30px',
height: '70px',
},
menuButton: {
[theme.breakpoints.up('md')]: {
display: 'none',
},
marginRight: theme.spacing(2),
},
menuText: {
[theme.breakpoints.down('sm')]: {
display: "none",
},
textTransform: 'none',
},
topMenuBoxes: {
flex: 1,
},
}));
How do I align content inside the divs where I have referenced classes.topMenuBoxes?
Thanks!
Add textAlign:"center" to your topMenuBoxes:
const useStyles = makeStyles(theme => ({
// ...
topMenuBoxes: {
flex: 1,
textAlign: "center"
}
}));
I am trying to apply some styles when a material-ui form control gets focus.
The pseudo-class 'hover' works well in the code below but 'focus' does not.
I am assuming that clicking into the Input component gives it focus but that does not seem to work. Any idea why and how to make it work?
import withStyles from "#material-ui/core/styles/withStyles"
import Input from "#material-ui/core/Input"
import InputLabel from "#material-ui/core/InputLabel"
import FormControl from "#material-ui/core/FormControl"
const styles = theme => ({
root: {
border: "1px solid",
borderRadius: theme.shape.borderRadius,
borderColor: "rgba(0, 0, 0, 0.23)",
marginBottom: theme.spacing.unit * 2,
padding: theme.spacing.unit,
width: "100%",
display: "flex",
flexDirection: "row",
alignItems: "center",
"&:focus": {
backgroundColor: "blue"
}
}
})
class TagsComponent extends React.Component {
render() {
return (
<FormControl variant="outlined">
<InputLabel>Tags</InputLabel>
<Input
disableUnderline
classes={{
root: this.props.classes.root
}}
/>
</FormControl>
)
}
}
export default withStyles(styles)(TagsComponent)
You can apply styles by overriding styles for input or override class name focused
const styles = {
...,
focused: {
backgroundColor: "green"
},
input: {
"&:focus": {
backgroundColor: "blue",
color: "white"
}
}
}
<Input
disableUnderline
classes={{
root: classes.root,
focused: classes.focused,
input: classes.input
}}
/>
Sandbox example https://codesandbox.io/embed/gallant-pascal-rh8jc