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>
))
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"
})
};
}
}
}
}
How to change/customize the default color of selected rows in a Material-UI table (of type Sorting & Selecting)? By default it is secondary (red) color (Codesandbox here: https://codesandbox.io/s/3sjxh). How to change it to a custom color, or at least to primary (blue), as it appears in the new beta version (https://next.material-ui.com/components/tables/#main-content) (v5).
You have to pass your styles to the classes props in order to change the styles for the TableRow.
To achieve the background-color change you want to override the default classes: .MuiTableRow-root.Mui-selected and .MuiTableRow-root.Mui-selected:hover.
To override them you have to use a parent reference with a so called $ruleName in your makeStyles hook. Here is a very good explanation from #Ryan Cogswell if you are more interested how it works.
This would then look like this:
const useStyles = makeStyles((theme) => ({
// your other styles
...,
tableRowRoot: {
"&$tableRowSelected, &$tableRowSelected:hover": {
backgroundColor: theme.palette.primary.main
}
},
tableRowSelected: {
backgroundColor: theme.palette.primary.main
}
}));
...
<TableRow
// your other props
...
classes={{
root: classes.tableRowRoot,
selected: classes. tableRowSelected,
}}
>
...
</TableRow>;
For the checkboxes, you only have to add the color prop in order to change it:
<Checkbox
// other props
...
color="primary"
/>
and for your Toolbar, you only need to change the provided highlight class inside your useToolbarStyles in order to get things working:
import { alpha } from "#material-ui/core/styles";
...
const useToolbarStyles = makeStyles((theme) => ({
...,
highlight:
theme.palette.type === "light"
? {
color: theme.palette.primary.main,
backgroundColor: alpha(
theme.palette.primary.light,
theme.palette.action.selectedOpacity
)
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.primary.dark
},
}));
Live demo:
For example:
import { CssBaseline, ThemeProvider, Typography } from "#material-ui/core"; // MUI **Typography** component
import { Text, RichText } from "#some-library/core"; // some-library's **Text** component
const theme = createMuiTheme({
overrides: {
typography: {
h1: {
fontFamily: Garamond,
fontSize: pxToRem(56),
lineHeight: pxToRem(64),
letterSpacing: pxToRem(-0.5),
[breakpoints.up("sm")]: {
fontSize: pxToRem(72),
lineHeight: pxToRem(76)
},
[breakpoints.up("md")]: {
fontSize: pxToRem(104),
lineHeight: pxToRem(112)
},
[breakpoints.up("lg")]: {
fontSize: pxToRem(120),
lineHeight: pxToRem(128),
letterSpacing: pxToRem(-0.75)
}
}
}
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Typography variant="h1">MUI Typography Heading</Typography>
<Text tag="h1">Library B text component</Text>
</ThemeProvider>
);
}
All I want is to apply the same styles of the <Typography> for the <Text> component.
I know can I can add className to the other component like <Text className={"MuiTypography-root MuiTypography-h1"} tag="h1">. Is that the right approach? And if I do like this would the props of components also be used in the component? Like <Text variant="h2"> and would it take all the responsiveness of Typography too?
Can the styles of MUI component be extended to another react component with all the other functionality (props etc) using any other way?
I am trying to create a shared (MUI components + some-library components) component library and using MUI as the base library for components and styles. And I have created custom theme for the MUI components but not able to extend these styles to the components of another library which too has few basic components (text field, buttons, form elements etc).
Please let know if the question makes sense as I am very new to react and MUI. Thanks much.
Ciao, for what I know, the answer should be no: you cannot extend material-ui component style to another component from different library. Because a component from another library would not accepts the same Material UI props (in your example, variant="h1" would be not recognized as valid props in other component except Material UI components).
Of course, as you said, you could assign the same Material UI class to another component and that component will follow the same style:
<Text className={"MuiTypography-root MuiTypography-h1"} tag="h1"> // this work
Or you could extend a Material UI component. Suppose that you want to make your own Text, you could extend Typography component using withStyles like:
import { withStyles } from "#material-ui/core/styles";
const MyText = withStyles((theme) => ({
root: {
color: "green" // in this case, MyText will have a green text color
}
}))((props) => <Typography {...props} />);
But, as you can see, I extended a Typography component, not a component coming from another library. Here a codesandbox example.
As I said, this is what I know. Maybe there is a way to achieve what you asked (even if I have some doubts because how to map Material UI props to be accepted by another component that has different props?)
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);
I followed the steps in this link to change the background color material-ui --> Date Picker dialog by changing the theme. Changing the theme changed background color but it did not change the color of the OK and CANCEL buttons.How to change the color of OK and CANCEL buttons?
You have two options to customize the color of the OK and Cancel buttons.
(Easier) If you are okay with all flat buttons in your application using same, customized color you want to use on your Date Picker buttons, then you can simply add
flatButton: {
primaryTextColor: purple500, // Whatever color you want.
}
to the object you are passing into your getMuiTheme() call.
If you are only customizing the button colors in this situation, and want the other Flat Buttons in your application to take the theme's color, then you need to customize the muiTheme right before the DatePicker is used.
So if we wanted to have all of our Flat Buttons to be cyan500, then we would set that at our main
const mainMuiTheme = getMuiTheme({
flatButton: { primaryTextColor: cyan500 }
})
const WrapperWithMainThemeProvider = (props) => {
return (
<MuiThemeProvider muiTheme={mainMuiTheme}>
<MyDatePicker />
</MuiThemeProvider>
)
}
Then if wanted the buttons in our DatePicker to be customized, then we do that in a custom component.
class MyDatePicker extends React.class {
render() {
const muiTheme = getMuiTheme({
...this.context.muiTheme,
flatButton: {
primaryTextColor: purple500,
}
})
// Customize the muiTheme, and pass it down in a new MuiThemeProvider.
// Only Flat Buttons that are children of this component
// will have the new color.
return (
<MuiThemeProvider muiTheme={muiTheme}>
<DatePicker />
</MuiThemeProvider>
)
}
}
MyDatePicker.contextTypes = {
muiTheme: React.PropTypes.object.isRequired
}
Material-UI uses Flatbutton as default on datepicker or for any dialog. Which means the OK/CANCEL button you see on datepicker is nothing but a flatbutton. So to apply background color to OK/CANCEL button of Date picker you have to use color instead of primaryTextColor. The color attribute of flatbutton does change the button background color. Please find example below and Screenshot here
import DatePicker from 'material-ui/DatePicker';
const mainMuiTheme = getMuiTheme({
flatButton: { color: '#333' }
})
const WrapperWithMainThemeProvider = (props) => {
return (
<MuiThemeProvider muiTheme={mainMuiTheme}>
<DatePicker
floatingLabelText="Date Of Birth"
hintText="Select Date Of Birth"
container="inline"
locale="en-US"
firstDayOfWeek={0}
autoOk={true}
value={this.state.dob}
onChange={this.changeDateOfBirth}
defaultDate={this.state.dateYesterday}
>
</DatePicker>
</MuiThemeProvider>
)
}
And below is what Material-UI expects muiTheme styles for FlatButton.
flatButton: {
color: transparent,
buttonFilterColor: '#999999',
disabledTextColor: fade(palette.textColor, 0.3),
textColor: palette.textColor,
primaryTextColor: palette.primary1Color,
secondaryTextColor: palette.accent1Color,
fontSize: typography.fontStyleButtonFontSize,
fontWeight: typography.fontWeightMedium,
}
For more information about muiTheme styles of each material-UI component check the following link https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js
I tested this and it worked for me. Hope this answer helpful.