I'm having trouble understanding how to align items in MUI. I have the following code:
class SignUpForm extends React.Component {
render() {
return (
<Button sx={{ justifyContent: "flex-end" }}
color="inherit" }>Sign Up</Button>
)
}
}
which is composed by:
class Nav extends React.Component {
render() {
return (
<Box sx={{ flexGrow: 1}}>
<AppBar position="static">
<Toolbar>
<SignUpForm />
</Toolbar>
</AppBar>
</Box>
)
}
}
But unfortunately the content is still staying to the left. Using this resource https://mui.com/system/properties, I might be missing an important CSS concept here. Could anyone enlighten me?
Thank you.
Toolbar is a flexbox, so you can add a div on the left side and set justify-content to space-between to push the Button to the right:
<Toolbar sx={{ justifyContent: "space-between" }}>
<div />
<SignUpForm />
</Toolbar>
I'm pretty sure you just need to change sx={{ justifyContent: "flex-end" }} to sx={{ marginLeft: "auto" }} on the Button
Might help someone in the future, if you also include where you're importing your components from. Personally, when I encountered the sx not working (realized this was the issue because when I inspected the element says sx=[Object object]), it's because I should've been importing Toolbar from #mui/material, see this reference. Also, I'm using #mui/material v 5.10.11. PS. I'm using Auto-import extension on VSCode, hence, the incorrect import from cause.
Related
I'm playing around with Flexbox, but I can't seem to figure out why FlexDirection doesn't work when set to 'row'.
export default function WorkoutScreen() {
return (
<SafeAreaView style={styles.container}>
<AppText>Heading</AppText>
<View style={styles.sets}>
<AppText>Reps</AppText>
<FontAwesome name="minus-square" size={48} color="purple" />
<AppText>9</AppText>
<FontAwesome name="plus-square" size={48} color="pink" />
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
sets: {
flex: 1,
**flexDirection: "row",**
justifyContent: "space-between",
alignItems: "center",
marginTop: 100,
},
});
I've been scratching my head about what I'm doing wrong, any tip to fix this would be greatly appreciated! I'm trying an ios simulator on Iphone pro 12 max.
OK I finally figured this out. If you check the [Text documentation][1], it says
The element is unique relative to layout: everything inside is
no longer using the Flexbox layout but using text layout. This means
that elements inside of a are no longer rectangles, but wrap
when they see the end of the line.
So basically I had to wrap the texts inside View tags.
[1]: https://reactnative.dev/docs/text
I'm quite new to Material UI and I'm starting my new app in React with a toolbar (it serves as a header in my case). I break up the toolbar into a grid and create typography for each grid. However, I have two persisting issues no matter what I try:
When I list multiple items in my grid, they stack and appear vertically, rather than spaced horizontally (see intro, how it works, ..)
The text across the entire toolbar varies in vertical alignment. I'd like to have all the text, regardless of the size, start at the bottom of the toolbar.
Here's the code I have written:
To create the styles, I use:
createStyles({
root: {
padding: theme.spacing(3, 2),
height: 10,
display: "flex",
flexDirection: "column",
justifyContent: "center",
},
links: {
textDecoration: 'underline'
}
}),
);
To create the header, I do the following:
const Header = ({ siteTitle }) => {
const classes = useStyles();
return (
<Toolbar disableGutters={true}>
<Grid container spacing={3}>
<Grid item xs>
<Typography className={classes.root} variant="h4" color="secondary">profolio.page/</Typography>
</Grid>
<Grid item xs={6}>
<Typography className={classes.links} variant="h6" color="secondary">intro</Typography>
<Typography className={classes.links} variant="h6" color="secondary">how it works</Typography>
<Typography className={classes.links} variant="h6" color="secondary">professional pages</Typography>
</Grid>
<Grid item xs>
<Typography className={classes.root} variant="h6" color="secondary">Continue</Typography>
</Grid>
</Grid>
</Toolbar>
)
}
No matter what I seem to try using the documentation, nothing works. Does anyone have any suggestions on how to fix this? Additionally, is the way I am creating this considered best practice?
first of all, you styles above is not linked to your jsx (i.e. className={classes.root}), so you have to fix that.
Secondly, Grid Layout in material UI uses flex and your code flexDirection:'column' makes it intentionally in column direction.
something below might solve your problem;
createStyles({
root: {
padding: theme.spacing(3, 2),
height: 10,
justifyContent: "center",
alignItems: "center"
},
links: {
textDecoration: 'underline'
}
}),
);
I am trying to center an Image within a View both horizontally and vertically the problem is that no matter what I put in the code it still seems to be in the same position all the time. I have this code for another View from another screen and it's exactly how I need it to be, however for the other pages it's not responding.
Here is my code:
<View style={styles.header}>
<Icon
raised
name='chevron-left'
type='octicon'
color='#f50'
onPress={() => this.props.navigation.goBack()}
containerStyle={{ alignSelf:'flex-end', marginRight:20, marginTop:-60 }}/>
<Image source={Logo} style={{resizeMode:'stretch', width:50, height:50, alignItems:'center', marginTop:30, position:'absolute'}}/>
</View>
const styles = StyleSheet.create({
header:{
backgroundColor:'#ff4714',
height:SCREEN_HEIGHT/8,
flexDirection: 'row'
}
});
EDIT: I've removed all the styling for the <Image> except for width and height and the image stays at the same place. I don't know what to make of this
Here is an expo snack https://snack.expo.io/SyCO!ree8
You need to add justifyContent:'center' and alignSelf:'center' to your image style,
Just check the code :
<View style={{
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}}>
<Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50,alignSelf:'center'}} />
</View>
And this is expo snack : expo-snack
UPDATE:
HERE IS MY UPDATED EXPO SNACK:
check here
Hope it helps
Try adding:
alignItems: 'center',
justifyContent: 'center'
to your header style
You might also need to add flex:1, depending on the state of your View
I'm trying to imitate the outlined textfield from Material-UI but I don't know how to hide the border behind the title text.
In the below image, notice how the "Due Date/Time" is taken from the Material-UI library and the title hides the border behind it but when I tried to imitate it with a custom component I just couldn't hide the border.
Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS?
My current component looks liks this:
<div style={inputContainerStyle}>
<div style={{
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',
}}
>
Color
</div>
<div
className="flex-row"
style={{
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',
}}
>
{
availableColors.map(color => <div style={colorCircleStyle(color)} />)
}
</div>
</div>
UPDATE
For many scenarios, my later answer (which avoids using TextField and therefore has no side-effects on FormControl context) may be more appropriate: How can I set an static outlined div similar to Material-UI's outlined textfield?
There is a great deal of flexibility in what you can do with TextField. TextField supports plugging in different types of inputs (e.g. Select, input, custom pickers) via the inputComponent property. You could leverage this to put anything inside its labelled outline by creating a custom component like this OutlinedDiv:
import React from "react";
import TextField from "#material-ui/core/TextField";
const InputComponent = ({ inputRef, ...other }) => <div {...other} />;
const OutlinedDiv = ({ children, label }) => {
return (
<TextField
variant="outlined"
label={label}
multiline
InputLabelProps={{ shrink: true }}
InputProps={{
inputComponent: InputComponent
}}
inputProps={{ children: children }}
/>
);
};
export default OutlinedDiv;
The className passed to the inputComponent takes care of the CSS that makes this all work. You can then use this like in the following:
import React from "react";
import ReactDOM from "react-dom";
import OutlinedDiv from "./OutlinedDiv";
import Avatar from "#material-ui/core/Avatar";
import deepOrange from "#material-ui/core/colors/deepOrange";
import deepPurple from "#material-ui/core/colors/deepPurple";
import red from "#material-ui/core/colors/red";
import green from "#material-ui/core/colors/green";
import blue from "#material-ui/core/colors/blue";
import Grid from "#material-ui/core/Grid";
function App() {
return (
<div className="App">
<OutlinedDiv label="Color Picker">
<Grid container justify="center" alignItems="center">
<Avatar style={{ backgroundColor: deepOrange[500] }} />
<Avatar style={{ backgroundColor: deepPurple[500] }} />
<Avatar style={{ backgroundColor: red[500] }} />
<Avatar style={{ backgroundColor: green[500] }} />
<Avatar style={{ backgroundColor: blue[500] }} />
</Grid>
</OutlinedDiv>
<br />
<br />
<OutlinedDiv label="Custom Outlined Thing">
You can put whatever you want in here.
</OutlinedDiv>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
No need to write Outlined div component and all. As we can achieve this using FormControl, FormLabel and Formgroup.
If you follow the Outlined div logic your input fields will lose focus.
The below solution is very easy and quick you just need to wrap your code:
<FormControl component="fieldset" className="fieldset">
<FormLabel component="Legend">Title</FormLabel>
<FormGroup row>
{/*Your Input fields e.g TextField or Select e.t.c*/}
</FormGroup>
</FormControl>
Now using useStyles apply some css:
fieldset: {
width: '100%',
marginBottom: 10,
padding: 10,
border: '1px solid #ddd',
borderRadius: 5
}
The outlined textfield was really tricky to implement. When pushing that feature, we had to consider several options, each with their own drawbacks
SVG Element
Easy to build and animate, but tough to scale with the surrounding elements. If we had gone this route, we would have needed to listen for some type of resize event, which would mean either using a window resize event, which is not robust, or using a newer and less supported feature such as a ResizeObserver/MutationObserver. There are polyfills, but that would have increased the bundle size about 2K for a relatively small feature.
The SVG route is likely what will be used in the future. It is also worth noting that this is how Google's Material Components Web solves the problem.
Plain old border with a background on the label
This is by far the simplest approach, but it is also somewhat inflexible. You can see an example of this in Google's new sign-in flow. There they actually set the background color to white. This is probably a fine approach for plenty of users, but of course won't work if your background is a gradient or some similar edge case. That said, there's no need to worry about resize because it's just a border.
Fieldset and legend
This is what we ended up going with, largely because of its flexibility for end users. Fieldset and its legend component are both built-in ways of attaining pretty much this exact functionality. The big drawbacks to this are that styling across browsers is tough, and the properties we'd be animating on are not performant, such as legend width. Additionally, it's always best to use semantic HTML of course, which this is not, which means we need to use aria-hidden to instruct screen readers to ignore the element.
Depending on your goals, any one of these solutions may work best for you. Beware that getting the perfect solution that solves all of these problems may be very tricky!
Just apply the same background color on the color div as the parent's background color, you can do it by background-color: inherit like this:
<div style={inputContainerStyle}>
<div style={{
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',
background-color:'inherit' **(just add this line)**
}}
>
Color
</div>
<div
className="flex-row"
style={{
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',
}}
>
{
availableColors.map(color => <div style={colorCircleStyle(color)} />)
}
</div>
</div>
So this is a sample piece of code for Material Dialog
<Dialog
open={this.props.open}
onClose={this.props.closeAtParent}
PaperProps={{
style: {
minHeight: '75vh',
minWidth: '75vw',
},
}}
aria-labelledby="open-dialog-title"
aria-describedby="open-dialog-description"
>
<DialogTitle id="open-dialog-title">
{this.props.dialogs[this.state.selected].title}
</DialogTitle>
<DialogContent>
<DialogContentText id="open-dialog-description">
{this.props.dialogs[this.state.selected].desc}
</DialogContentText>
{this.imageIfExists()}
</DialogContent>
<DialogActions>
{this.populateButtons()}
</DialogActions>
</Dialog>
Now as you can see I was able to set the dialog width and height through PaperPros but I am unable to set other properties like backdrop color and DialogActions' button alignment.
There is no documentation or SO available for the same which is so sad. They mention classes and PaperProps but do not talk about them.
My questions therefore are,
How do I centre the buttons which by default are aligned at the right?
Also, how do I change the backdrop color which is initially grey?
Material-ui Dialog also inherits ModalComponent you can use the Props of Modal to change the Backdrop color
Modal API Description
Button in DialogActions are by default justified to flex-end. You can override this behaviour using classes property
const styles = {
backdrop: {
backgroundColor: blue[100],
color: blue[600],
},
action:{
justifyContent:'inherit',
}
};
<Dialog
BackdropProps={{
classes: {
root: classes.backdrop,
}
}}
{...other}/>
<DialogActions
className={classes.action}>
you can use Grid to align your content, in this case your buttons as described in here: https://material-ui.com/layout/grid/
you can use BackdropProps to change backdrop values. use: https://material-ui.com/api/dialog/
(it clearly says: The properties of the Modal component are also available. You can take advantage of this behavior to target nested components)
so the final outcome will be:
<Dialog
onClose={this.handleClose}
{...other}
BackdropProps={{
classes: {
root: classes.root
}
}}
PaperProps={{
style: {
minHeight: "75vh",
minWidth: "75vw"
}
}}
aria-labelledby="open-dialog-title"
aria-describedby="open-dialog-description"
>
<DialogTitle id="open-dialog-title">title</DialogTitle>
<DialogContent>
<DialogContentText id="open-dialog-description">
content
</DialogContentText>
</DialogContent>
<DialogActions>
<Grid container justify="center">
<Grid item>
<Button variant="raised" color="primary">
test
</Button>
</Grid>
</Grid>
</DialogActions>
</Dialog>
here is a working example : https://codesandbox.io/s/10vxmwqy7
hope this will help you.