I am trying to implement react-sidenav, and I would like the buttons to be at the bottom - a flex-direcion of column-reverse. I can add these styles manually in chrome, and it works. According to the documentation, there is a style property on SideNav that I can use to set my custom style. I would change it from block to flex and add the column-reverse flex direction.
I cannot get the style property to work, however. I have tried this:
const SideNavBottom = {'display': 'flex', 'flex-direction': 'column-reverse'};
.
.
<SideNav
style={SideNavBottom}
>
You can view a demo of what I am working with at codesandbox.io. You will want to look at the RenderItems2 file.
const SideNavBottom = {display: 'flex', flexDirection: 'column-reverse'};
<SideNav
style={SideNavBottom}
/>
or
<SideNav
style={{display: 'flex', flexDirection: 'column-reverse'}}
/>
your sidenav component not closed, also you can test above code
Related
I would like to change the following code to meet my needs
I need to change the design from this :
to this :
I can not change the style and also add an intermediate step
here is the lin to the sandbox
https://codesandbox.io/s/horizontalnonlinearstepper-demo-material-ui-forked-9pqxxk
Thank you in advance
To make the stepper icons closer to each other simply change the width of your <Stepper /> component. I chose 400px, change this value to fit your needs.
sx={{
width: "400px",
...
}}
I replaced the content > with a wider arrow ❯ and adjusted the top alignment.
".MuiStepConnector-root": {
top: 2
},
".MuiStepConnector-root span::before": {
display: "flex",
justifyContent: "center",
content: '"❯"'
}
This is what the result looks like:
Live Demo
I have a Material UI component, and I am trying to custom style it using the CSS.
Following is the code:
<IconButton className="my-class">
<Close />
</IconButton>
CSS:
.my-class {
float: right;
margin-left: auto;
margin-right: 0;
}
But I am not able to style it, when I tried the following, it works:
<IconButton style={{ float: 'right', marginLeft: 'auto', marginRight: '0' }}>
<Close />
</IconButton>
Why I am not able to style the Material UI components using regular CSS?
Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>, which gives MUI precedence over your custom styles.
You need to use the StyledEngineProvider exported from #mui/material/styles with the injectFirst option, in order for the CSS injection order to be correct. It is explained here.
So something like this shoud work:
<StyledEngineProvider injectFirst>
<IconButton className="my-class">
<CloseIcon></CloseIcon>
</IconButton>
</StyledEngineProvider>
You can style MUI components using several ways like GlobalStyles API, sx, styled or even normal way.
If you are going to style the particular component like IconButton, and if you have a look at the document for the API, you can find the class names for the component.
Here's couple of references.
https://mui.com/customization/how-to-customize/#main-content
How to give conditional style to MUI TextField?
I have a problem in displaying the values from the TextField in my React app.
I'm using material UI and material-ui-phone-number as its packages. As you can see, the values after i click the flag, it is displaying on the back. I believe this is on the zIndex. Pls modify only the dialog2.js
Pls check my codesandbox here
CLICK HERE
Your MuiPhoneNumber utilizes a MUI modal for the country selection & its default z-index is 1300. It does not look like they expose a prop to alter its css properties so you can just target #country-menu (the id of the modal) using any preferred styling solutions
<div>
<style type="text/css">
{`
#country-menu {
z-index: 1801;
}
`}
</style>
<DialogContent style={{ width: 300, height: 500 }}>
<MuiPhoneNumber
name="MobileNo"
label="Mobile No."
variant="outlined"
fullWidth
defaultCountry={"vn"}
value={selectedValue}
onChange={(e) => setSelectedValue(e)}
/>
</DialogContent>
</div>
This can be achieved by doing the following changes:
Remove all CSS z-index defined
Put the Dialog 2 in Dialog 1 content
Here is the working CSB Link: https://codesandbox.io/s/nested-dialog-menuitem-dropdown-forked-wymm0?file=/dialog1.js
I've been trying to use React Native lately and I am trying to incorporate a ScrollView in my program. I am having issues centering the ScrollView in the middle of the page. I have looked at many of the posts here on SO and have been unable to get a working implementation. If someone could point me in the right direction, I would really appreciate it!
Screen:
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollable}>
<ProfileGreeting />
<DailyGoals goals={GOALS} />
<CoursesContainer courses={COURSES} />
</ScrollView>
</SafeAreaView>
Styles:
const styles = {
container: {
height: "100%",
width: "100%",
display: "flex",
alignItems: "center",
flex: 1
},
scrollable: {
flexGrow : 1,
justifyContent : 'center'
}
}
As suggested in this this post I tried to use flexGrow on the ScrollView, but it still doesn't seem to work - it instead shifts to the side as such:
Try Scroll view "contentContainerStyle" propert instead of style
propert
ScrollView style defines the outer container of the ScrollView, e.g its height and relations to siblings elements
ScrollView contentContainerStyle defines the inner container of it, e.g items alignments, padding, etc
I currently have these two styles:
indentLeft: {
marginLeft:'4%',
},
forwardButtonLocation: {
flex: 1,
flexDirection: 'column',
alignItems: 'flex-start',
paddingTop: 20,
},
I followed this tutorial https://facebook.github.io/react-native/docs/style.html and concatenated them like this:
<View style={styles.forwardButtonLocation, styles.indentLeft}>
However, it seems like the latter style overrides the previous one even indentLeft and forwardButtonLocation don't share same properties. The button is either padded on top with 20 or indented by 4% depending on which one comes to the second in the concatenation, but according to the tutorial, it should have both properties. What am I doing wrong here?
In order to provide multiple styles to the same element you need to the pass the styles within []
<View style={[styles.forwardButtonLocation, styles.indentLeft]}>
Passing them directly in {} will only allow the last one to take effect