I'm trying to make a permanent clipped navigation drawer with Material UI as per https://material.io/guidelines/patterns/navigation-drawer.html
Seems that there is a pull request out for this but not yet merged: https://github.com/callemall/material-ui/pull/6878
At this stage I'm trying to override with styles but can not get my left nav (paper) to apply the style marginTop: '50px',
Are there some samples out there on how to achieve this with v1.0.0-alpha.21?
They changed the way you have to override certain styles in v1. The inline styles no longer work. Certain parts of a component can be overridden with a simple className applied to the component. See this link for further details https://material-ui-1dab0.firebaseapp.com/customization/overrides.
Some deeper nested properties of certain components i.e the height of the Drawer can only be accessed by overriding the class itself. In this case the paper class of the drawer element.
This is a simple example
import React, { Component } from "react";
import Drawer from "material-ui/Drawer";
import { withStyles, createStyleSheet } from "material-ui/styles";
import PropTypes from 'prop-types';
const styleSheet = createStyleSheet("SideNav", {
paper: {
marginTop: '50px'
}
});
class SideNav extends Component {
....
render() {
return (
<Drawer
classes={{paper: this.props.classes.paper}}
docked={true}
>
....
</Drawer>
);
}
}
SideNav.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styleSheet)(SideNav);
Related
Having two appBars components in the same page is a good approach (one as header and the other one as footer)? Besides, I am using the MUI createTheme to override some styles. I am doing this to override the appBar component.
components: { ...
MuiAppBar: {
styleOverrides: {
root: {
minHeight: '4.375rem',
backgroundColor: appColors.aqua600,
},
},
}, ...
This works fine, but as was wondering how could I override the style of an AppBar that is renders as 'header' and style the other appBar that is rendered as 'footer'
The component usage:
<AppBar
component="header | footer" ...
</AppBar>
I know that can be easily done with CSS, but I was wondering if this can be done using the createTheme from MUI?
It can be done by overriding styles based on props using ownerState.
Overrides based on props
You can pass a callback as a value in each slot of the component's styleOverrides to apply styles based on props.
The ownerState prop is a combination of public props that you pass to the component + internal state of the component.
You can check more on docs.
So, the custom theme for MuiAppBar should be something like this:
components: {
MuiAppBar: {
styleOverrides: {
root: ({ ownerState }) => {
return {
...(ownerState.component === "header" && {
backgroundColor: "#202020"
})
};
}
}
}
}
I'm trying to customize a single IonSelectOption with a custom CSS class to change the color of one IonSelectOption. I am copy-pasting the code from Ionic's documentation but it still isn't working. The CSS className that I provide to the IonSelectOption does not seem to get passed along to whatever interface that it selected. Hope someone can help me out!
Link to Documentation. This is the code I'm using:
import React from 'react';
import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '#ionic/react';
const options = {
cssClass: 'my-custom-interface'
};
export const SelectOptionExample: React.FC = () => {
return (
<IonPage>
<IonContent>
<IonItem>
<IonLabel>Select</IonLabel>
<IonSelect interface="popover" interfaceOptions={options}>
<IonSelectOption value="brown" class="brown-option">Brown</IonSelectOption>
<IonSelectOption value="blonde">Blonde</IonSelectOption>
<IonSelectOption value="black">Black</IonSelectOption>
<IonSelectOption value="red">Red</IonSelectOption>
</IonSelect>
</IonItem>
</IonContent>
</IonPage>
);
};
and the CSS:
/* Popover Interface: set color for the popover using Item's CSS variables */
.my-custom-interface .brown-option {
--color: #5e3e2c;
--color-hover: #362419;
}
in react, it is className, not class
I have an autocomplete component at the bottom of the Create view with TabbedForm.
Dropdown list is getting hidden as overflow of parent Card component is set to hidden.
Is there a way to pass a style property to a parent Card component to override default material-ui overflow property?
If no, is there any hack that I can use to achieve this at a render time?
Try this:
import { withStyles } from '#material-ui/core/styles'
const cardCreateStyles = {
card: {
overflow: 'scroll',
backgroundColor: 'Lavender',
}
}
const CardCreate = withStyles(cardCreateStyles)(({ classes, ...props }) => (
<Create classes={classes} {...props} >
...
</Create>
))
I am trying to use breakpoints with {withStyles} from "#material-ui/styles", but the debugger shows that theme.breakpoints is not defined.
I tried to wrap the component with ThemeProvider but it does not work.
https://codesandbox.io/s/material-demo-shgh7?from-embed
withStyles exported with #material-ui/styles not provide theme props, you'll use import { withStyles } from "#material-ui/core/styles";
Exemplo no code sand box arrumado ai
class app extends Component{
render(){
const {classes} = this.props
return (
<div className={classes.root}></div>
)
}
}
const style = theme => ({
root: {
[theme.breakpoints.up('sm'){ //only show on mobile or small screen
display: 'none'
},
}
})
export default withStyles(style)(app)
My simple NextJS page looks like this (results can be viewed at https://www.schandillia.com/):
/* eslint-disable no-unused-vars */
import React, { PureComponent, Fragment } from 'react';
import Head from 'next/head';
import compose from 'recompose/compose';
import Layout from '../components/Layout';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
const styles = {
root: {
textAlign: 'center',
paddingTop: 200,
},
p: {
textTransform: 'uppercase',
color: 'red',
},
};
class Index extends PureComponent {
render() {
const { classes } = this.props;
const title = 'Project Proost';
const description = 'This is the description for the homepage';
return (
<Fragment>
<Head>
<title>{ title }</title>
<meta name="description" content={description} key="description" />
</Head>
<Layout>
<p className={classes.p}>amit</p>
<Button variant="contained" color="secondary">
Secondary
</Button>
</Layout>
</Fragment>
);
}
}
export default withStyles(styles)(Index);
I am importing a bunch of components off the #material-ui/core library to style my items. I also have a local style definition assigned to a style constant.
What seems to be happening here is that my style isn't getting rendered on the server which is why the files being served upon load are sans-style. And then the CSS gets rendered by the client-side code. As a result, there's a flash of unstyled content that lasts almost a second, long enough to be noticable.
Any way to fix this? The entire codebase is up for reference at https://github.com/amitschandillia/proost/tree/master/web.
I ran a similar problem when tried to make a production build of my app, that uses material-ui. I manage to solve by adding a JSS Provider like this:
import JssProvider from "react-jss/lib/JssProvider";
class App extends Component {
render() {
<JssProvider>
*the rest of your material-ui components*
</JssProvider>
}
}
Here's the solution - https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js .
Basically, all you need to do is to sync server-side class names with client-side. The link above shows what you need to do to fix that issue.