how to custom the sub-component in Material UI globally - reactjs

I wanna custom the floating Label of TextField.
I know creating a new one works like below, but is there a better way?
import TextFiled from 'material-ui/TextField';
class TextFiledNew extends Component {
static propTypes = {
}
render () {
return (
<TextFiled
floatingLabelFixed={true}
floatingLabelStyle = {{top: '88px', textTransform: 'uppercase', letterSpacing: '0.1em'}}
/>
)
}
}
module.exports = TextFiledNew
I tried the changing Theme way, but it doesn't work.
const muiTheme = getMuiTheme({
textField: {
floatingLabel:{
top: '88px',
textTransform: 'uppercase',
letterSpacing: '0.1'
}
}
});

That works just fine! We use several components with a custom wrapper around them from material-ui. Our EnhancedMenuItem lets us add some optional icons and transitions in some circumstances. Definitely experiment with the library and make your own modifications to get it exactly right for your needs.

Related

React mui dialog body padding with custom scrollbar

I have a React mui theme with a custom scrollbar like this:
ui.material.createTheme({
components: {
MuiCssBaseline: {
styleOverrides: {
'::-webkit-scrollbar': {
width: '100px'
}
}
}
}
});
Then I use a Dialog. This adds padding-right and overflow to the body:
At this point padding-right: 19px is incorrect. It should be 100px. What is the appropriate location to override these styles in mui? I'm aware I can add a CSS override for this situation but I'd like to solve in the proper, supported way, that mui probably provides somehow.

Make MUI Checkbox border color as gradient

I am writing styleOverrides to MuiCheckBox and want to make its borders as linear gradient. Any ideas how to make it possible?
MuiCheckbox: {
styleOverrides: {
root: {
color: 'linear-gradient(89.38deg, #957947 -13.88%, #E1BC6C 27.59%, #EFDB7C 66.54%, #E9BA6A 105.86%)',
backgroundColor: 'transparent',
}
}
You can add borderColor property to your root like this,
root:{
borderColor: 'linear-gradient()'
}
Something I use and I am converting our whole app to in order to do the migration from MUI 4 to 5, is component overrides.
So say you have a or component. Basically in like a styled.js file, you can do:
import { withStyles } from '#material-ui/core';
import { MenuItem } from '#material-ui/core';
const MenuItemStyled = withStyles((theme) => ({
root: {
borderColor: 'yourGradient'
}
})(MenuItem);
export { MenuItemStyled }
(in jsx file like 'index.js')
import MenuItemStyled from './styled';
import Menu from '#material-ui/core';
<Menu>
<MenuItemStyled value={blah}>blah</MenuItemStyled>
<MenuItemStyled value={blahblah}>blahblah</MenuItemStyled>
</Menu>
I find this gives you more root access to component styles without having to dig through specific classnames in the inspector. When overriding components like this is checks for your custom styles first before render and it just makes everything significantly easier. Plus in MUI 5 useStyles is depricated, so you'll want to do it this way regardless in order to keep your app current.

jss to override a material-ui nondeterministic class

I'm trying to create a custom style for material textField and need a JSS selector that reaches a nondeterministic classname.
Style would look something like this:
const styles = {
'#media (min-width: 768px)': {
borderLabel: {
top: 2,
'&.MuiInputLabel-shrink':{
top: -2,
}
}
}
The issue is MuiInputLabel-shrink is also generated by jss and has a xxx number suffix. Is there any selector that work on generated classes?
Material-ui have a built in API where you can override mostly of the styling.
Assuming you are using material-ui in react, you can override shrink in the classes property in InputLabel component.
<InputLabel
classes={{
shrink: classes.shrinkStyle
}}
/>
Read the documentation to find the right component to override. There is also attached code to help you on the way. https://codesandbox.io/embed/l32qn5p18q
Link to similar problem in GitHub: https://github.com/mui-org/material-ui/issues/10468
Now then back to style through JSS
There is some possibilites to style with JSS through nesting. I've not researched huge lot on this, but I know that you can use nested JSS. Example:
const styles = {
'#media (min-width: 768px)': {
borderLabel: {
//styling
'&>div':{
//styling
}
'&>div>div>td':{
'& svg':{
//styling
}
}
}
}
}
You should also read JSS documentation

In material-ui, how can I set different theme-styles for different breakpoints?

This questions targets material-ui 1.0.
When I create a theme with createMuiTheme, how can I set, for example for typography.title, different styles for different breakpoints? On a component level I can achieve this with something like this:
const styles = theme => ({
title: {
fontSize: 34,
},
[theme.breakpoints.down('sm')]: {
title: {
fontSize: 28,
}
},
})
Material-ui sure has a lot of different theming solutions. When you look for one that would be useful to you, you are looking for two things:
Creating a theme that can be applied to component hierarchy.
Doc page "Nesting the theme"
Changing single styling rules while keeping the others intact.
Doc page "Customizing all instances of component type"
and "Typography API"
The key to make it work is to create a second theme that can see the breakpoints, and provide it with some special options for overriding typography:
...outerTheme,
overrides: {
MuiTypography: {
title: {
[outerTheme.breakpoints.down("sm")]: {
fontSize: 28
},
}
}
}
I find the "Nesting the theme" example code suitable to test it on, so this is what it could look like:
codesandbox.io/s/98192p85zy
EDIT: replaced the final code link to make it more useful an answer than just the examples from the docs.
There is another way to work with createMuiTheme with the breakpoints methods.
If you check the createMuiTheme core, you will see that it uses the createBreakpoints class.
So, you can do like that:
// theme.js
import createBreakpoints from '#material-ui/core/styles/createBreakpoints'
import { createMuiTheme } from '#material-ui/core/styles'
const breakpoints = createBreakpoints({})
const theme = createMuiTheme({
overrides: {
MuiTab: {
root: {
[breakpoints.up('lg')]: {
minWidth: '200px',
backgroundColor: 'yellow',
},
},
wrapper: {
padding: '0 10px',
backgroundColor: 'black',
},
},
},
})
export default theme
(tested: #material-ui/core 4.0.1)

Can't get JSS hover to work with React/Typescript/Material UI

I am quite new to this combination of technologies: React/Typescript/Material UI.
I only found one similar question about using hover with Material-UI but the syntax was quite different as the React code did not use Typescript. You can find this here: Overriding with classes in material-ui v1.0.0-beta-1 shows "the key provided to the classes property is not implemented" warning
I am trying to figure out a way to add the hover property to the Material-UI paper component using it's inbuilt support for JSS.
The error I get is: Material-UI: the key .Component-root-199:hover provided to the classes property object is not implemented in Paper.
You can only overrides one of the following: root,rounded,shadow0,shadow1,shadow2,shadow3,shadow4,shadow5,shadow6,shadow7,shadow8,shadow9,shadow10,shadow11,shadow12,shadow13,shadow14,shadow15,shadow16,shadow17,shadow18,shadow19,shadow20,shadow21,shadow22,shadow23,shadow24
This is my code:
import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import Paper from 'material-ui/Paper';
import {StyleRulesCallback} from 'material-ui/styles/withStyles';
const styleSheetPaper: StyleRulesCallback = (theme) => ({
root: {
color: theme.palette.text.secondary,
padding: theme.spacing.unit * 2,
'&:hover': {
cursor: 'pointer',
},
}
});
interface IStyles {
root: any;
}
const ODPaper = withStyles<JSX.ElementChildrenAttribute, IStyles>(styleSheetPaper)((props) => {
return (
<Paper {...props} className={props.classes.root}>
{props.children}
</Paper>
);
});
export default ODPaper;
I think you just run into an issue https://github.com/callemall/material-ui/issues/8048

Resources