I am attempting to style the from-to of x rows number on a Material-Table, via
import MaterialTable from 'material-table'
import { TablePagination, withStyles } from '#material-ui/core'
const StyledPagination = withStyles({
caption: {
'&.MuiTypography-caption': {
fontSize: '1.5rem !important'
},
fontSize: '1.5rem !important'
}
})(TablePagination)
<MaterialTable
**Other Props Here**
components={{
Pagination: props => (
<StyledPagination
{...props}
labelRowsPerPage={<div>{props.labelRowsPerPage}</div>}
labelDisplayedRows={row => (
<div>{props.labelDisplayedRows(row)}</div>
)}
/>
)
}}
/>
I feel like those two css selectors should be redundant, but neither is working. I feel like material-table is overriding them as the computed font size is 0.75rem .MuiTypography-caption. Have also attempted styling via the root rather than caption with no difference there either.
I have been able to style the dropdown selector for number of rows to display, which seems like the same should apply to this. Originally started with this approach, which also did not work.
Ended up solving this with MuiThemeProvider, I dont think the normal ThemeProvider is working with Material-table
import { createMuiTheme, MuiThemeProvider } from '#material-ui/core/styles'
const theme = createMuiTheme({
overrides: {
MuiTypography: {
caption: {
fontSize: '1.5rem'
}
}
})
then,
<MuiThemeProvider theme={theme}>
<MaterialTable />
</MuiThemeProvider>
Although, this will style anything with class MuiTypography-caption
Related
I am using Material UI Select component inside my React project.
I am trying to override the CSS class .MuiPaper-root and or .MuiMenu-list.
My Select component:
<Select
value={selectValue}
disableUnderline
onChange={handleChange}
css={styles.select}
>
{cities?.map((city) => {
return (
<MenuItem
key={city.value}
value={city.value}
css={styles.selectItem}
>
{city.label}
</MenuItem>
);
})}
</Select>
Below isn't working?
export default ({ theme }: StylesProps) => ({
select: css`
.MuiPaper-root {
background-color: red;
}
`,
});
According to the doc, there are several ways that we can modify styles in MUI. In order to change MuiPaper, we can take advantage of createMuiTheme and create a theme as below to override MuiPaper:
const theme = createMuiTheme({
overrides: {
MuiPaper: {
root: {
color: "white"
}
}
}
});
Then, we need to pass it as a theme prop to the ThemeProvider component:
<ThemeProvider theme={theme}>
//***Other part of your code***//
</ThemeProvider>
when it comes to changing MenuProps in the Select component, we can use a property called MenuProps in the Select component(description in doc)
First, I created a list style in useStyles:
const useStyles = makeStyles((theme) => ({
//other classes//
list: {
backgroundColor: "blue"
}
}));
and then passed it as a MenuProp property to the select component:
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
MenuProps={{ classes: { list: classes.list } }}
>
//***other part of your code***//
</Select>
Here is a codesandbox example that I've created for this example. In the Muipaper modification, I changed the color of the text to white. And in the MenuProps changed the background color to blue.
I am trying to customise the DateTimePicker from Material-UI. Here is its documentation: https://material-ui-pickers.dev/api/DateTimePicker
There is no section for the styling. I want to change the main color for all the coloured components. What I've tried so far is using the general theme documentation and try to change the style of the theme:
const theme = createMuiTheme({
status: {
danger: '#FF72B1',
},
dateTimePicker: {
headerColor: '#FF72B1',
selectColor: '#FF72B1',
},
datePicker: {
selectColor: '#FF72B1',
headerColor: '#FF72B1'
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<Routes />
</ThemeProvider>
)
}
As far as I understood from the theme documentation, the only thing that I've done so far is defining variables with styles, but they are not going to be applied. I have to specify them in the exact component, and here comes the tricky part.
In my Material-UI DateTimePicker:
function MaterialDateTimePicker() {
const classes = useStyles()
return (
<Fragment>
<DateTimePicker
label={label}
inputVariant="outlined"
value={value}
onChange={onChange}
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
</Fragment>
);
}
I have tried to applied the styling:
const useStyles = makeStyles(theme => ({
root: {
color: '#FF72B1',
backgroundColor: 'orange',
'& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
backgroundColor: 'green'
}
},
checked: {},
}));
This is how I've been trying to style components with this library, based on research, reading the docu, and some SO answers:
How to change material UI select border and label
So basically you have to go to the documentation, try to find the .XXX class that matches the component that you want to customise, and if documentation is missing, you have to go to the DOM, and start looking for this class.
I did that, but I have a couple of questions:
1) In my particular case, I have the problem that on my DateTimePicker I apply the root classes, which are on the input component level. The calendar that pops up, is not a children of this component, it's open by javascript, therefore I don't know how to access it.
This syntax does not work any longer:
root: {
color: '#FF72B1',
backgroundColor: 'orange',
'& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
backgroundColor: 'green'
}
},
Because root is the input, not the calendar that pop ups.
2) Is this really the way to go with this library? Because all the answers on SO and complains go on this direction. Does anybody know another strategy?
3) In #material-ui/pickers node_modules folder I couldn't find the css file. I would like to pick it and customise there, like it's possible for react-dates library etc. Is that possible? Where are the css stylings?
I've prepared a sandbox with what I've tried:
https://codesandbox.io/s/inspiring-napier-zh4os
(Unfortunately the utils library is installed but not working, locally in my computer the picker works fine, I just can't style it)
I'm working with this right now, wat i did to partially override the styles is to wrap in a ThemeProvider (you can pass your theme trow your component)
<MuiPickersUtilsProvider locale={deLocale} utils={DateFnsUtils}>
<Grid container justify="space-around">
<ThemeProvider theme={defaultMaterialTheme}>
<KeyboardDatePicker
...
/>
</ThemeProvider>
</Grid>
</MuiPickersUtilsProvider>
And your theme could be something, like this
import { createMuiTheme } from '#material-ui/core'
const defaultMaterialTheme = createMuiTheme({
overrides: {
MuiPickersCalendarHeader: {
switchHeader: {
color: '#6A148E',
textTransform: 'uppercase',
},
dayLabel: {
textTransform: 'uppercase',
},
},
MuiPickersDay: {
day: {
color: '#707070',
},
daySelected: {
backgroundColor: '#6A148E',
'&:hover': {
backgroundColor: '#6A148E',
},
},
current: {
color: '#6A148E',
},
},
MuiSvgIcon: {
root: {
fill: '#6A148E',
},
},
MuiOutlinedInput: {
root: {
'&:hover': {
border: '10px solid red !important', // i'm struggling with this :/
},
},
},
},
})
export default defaultMaterialTheme
Hope it's help
I think you just need to cancel out the webkit appearance. There are a couple of ways to cancel out specific webkit styles (so you can add your own).
Try the following:
-webkit-appearance: none;
ReactJS inline styles: webkitAppearance: "none";
Also check out other -webkit-[] functions... There are functions for more specific elements such as borders, colours, etc...
Hope this helps :)
Trying to figure out how to override the styles of the tabs indicator using styled from Emotion. I am not sure how to access nested classes. This is what I have, but it isn't getting me there:
const StyledTabs = styled(Tabs)(
{
classes: {
indicator: {
background: 'black',
},
},
}
);
Any help would be awesome!
There are a couple issues. styled from Emotion only supports generating a single class name per usage. It doesn't provide any support for the classes: {indicator: {styles}} structure in your example.
Below is a syntax that allows you to use styled to provide a class name for the "indicator" class of Tabs:
const StyledTabs = styled(({ className, ...other }) => {
return <Tabs {...other} classes={{ indicator: className }} />;
})({
backgroundColor: "black"
});
However, this does not work completely robustly because the <style> element for the Emotion styles does not consistently occur after the <style> elements from JSS (used for Material-UI's styling) in the <head> of the document. I'm not sure how to alter the insertion point for Emotion's styles, but you can read here about how to change the insertion point for JSS. I've included this approach in my sandbox below.
Here's a sandbox that shows this working:
Another syntax option is the following which will allow you to control more than one Tabs class:
const StyledTabs = styled(({ className, ...other }) => {
return <Tabs {...other} classes={{ root: className, flexContainer: "flexContainer", indicator: "indicator" }} />;
})({
"& .indicator": {
background: "black"
},
"& .flexContainer": {
flexDirection: "row-reverse"
}
});
I am using Radium library for inline styling in react . Using it works fine for other components but i am having issues with Material-UI components. When i hover my mouse over the Paper , it doesn't change the color to green . What's wrong here ? How do I fix this ?
import React, { Component, Fragment } from 'react';
import { Grid, GridList, Paper, ListItem, List, ListItemIcon, ListItemText } from '#material-ui/core';
import { connect } from 'react-redux';
import Radium from 'radium';
class AchievementsHome extends Component {
render() {
return <>
<Grid container alignItems="center" direction="column">
<h1>Achievements</h1>
<Paper
style={{backgroundColor:'red' , ':hover':{backgroundColor:'green' }}
>
<h1>Hi</h1>
</Paper>
</Grid>
</>
}
}
const mapStateToProps = (state) => {
return {
achievements: state.achievements
}
}
export default connect(mapStateToProps)(Radium(AchievementsHome));
With Material UI external styles ( so styles not directly from the Material UI library ) hardly ever work, to change the color on hover you will have to set a theme as explained in the Themes section of the docs
First grab the import withStyles and define a theme.
import { withStyles } from "#material-ui/core/styles";
const customStyles = theme => ({
root: {
backgroundColor: "red",
"&:hover": {
backgroundColor: "green"
}
}
});
Than define a new component that is wrapped with withStyles:
const CustomPaper = withStyles(customStyles)(Paper);
In your render use the component you defined:
<CustomPaper
/>
Hope this helps.
Material UI provides its own way of styling using CSS in JS (JSS). It provides a withStyles higher order component and a withTheme and lets you style at a global theme level. You can also pass class names for some components for custom styling.
You do not need to use Radium to style Material UI components.
Also your CSS selector for hovering needs to include the parent CSS selector:
const paperStyle = {
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'green'
}
}
return (
<Paper styles={paperStyle}>
<Typography variant="h1">Hi</Typography>
</Paper>
);
Not really a problem but something I’m not happy with. I'm using react + typescript + css modules + https://material-ui-next.com/. Problem is that when I need to style material ui components I have to use !important a lot. Question is if there is a way to create styles without important. I create a sample project to reproduce the problem https://github.com/halkar/test-css-modules
material-ui exposes many of their components for styling. There two ways to go about doing this.
Apply styles globally
You could style the components globally and apply it to the theme. An example of this would be something like this (copied from the docs http://www.material-ui.com/#/customization/themes):
import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';
// This replaces the textColor value on the palette
// and then update the keys for each component that depends on it.
// More on Colors: http://www.material-ui.com/#/customization/colors
const muiTheme = getMuiTheme({
palette: {
textColor: cyan500,
},
appBar: {
height: 50,
},
});
class Main extends React.Component {
render() {
// MuiThemeProvider takes the theme as a property and passed it down the hierarchy
// using React's context feature.
return (
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar title="My AppBar" />
</MuiThemeProvider>
);
}
}
export default Main;
As you can see in here, appBar component have a height of 50px meaning that every time you add an appbar component to your app down the tree where you applied the muiTheme, it will give it a height of 50px. This is a list of all the styles you can apply for each component https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js.
Apply styles using style attribute
To apply the styles to individual components, you can usually use the style property and pass it the styles you want.
This is another example from the docs where a margin of 12px is applied to a RaisedButton.
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const style = {
margin: 12,
};
const RaisedButtonExampleSimple = () => (
<div>
<RaisedButton label="Default" style={style} />
<RaisedButton label="Primary" primary={true} style={style} />
<RaisedButton label="Secondary" secondary={true} style={style} />
<RaisedButton label="Disabled" disabled={true} style={style} />
<br />
<br />
<RaisedButton label="Full width" fullWidth={true} />
</div>
);
export default RaisedButtonExampleSimple;
Now, the styles are defined in the same file but you could define them in a separate file and import them to the file where you are using the components.
If you want to apply multiple styles then you can use the spread operator like so: style={{...style1,...style2}}.
Usually, you are styling a specific thing in the component (root element) with the style property but some components have more than one property to style different elements of the component. Under properties in this page http://www.material-ui.com/#/components/raised-button, you can see that there are style property, labelStyle and rippleStyle to style different parts of RaisedButton.
Check the properties under the component that you are using and see which style property you could use, otherwise check the available global style properties you could override. Hope this helps!
I should've used JssProvider and tell it to put material UI styles before mine in the page head section.
import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';
const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
jss.options.insertionPoint = document.getElementById('jss-insertion-point');
function App() {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
...
</JssProvider>
);
}
export default App;
you have to use the component API's. You can't set style to the components imported from libraries just with css if the component has API's to get style.
*Update
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
const styles = {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
},
label: {
textTransform: 'capitalize',
},
};
function Classes(props) {
return (
<Button
classes={{
root: props.classes.root, // class name, e.g. `classes-root-x`
label: props.classes.label, // class name, e.g. `classes-label-x`
}}
>
{props.children ? props.children : 'classes'}
</Button>
);
}
Classes.propTypes = {
children: PropTypes.node,
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Classes);