I want to custom font famaily Chip but it doesn't work .................................................................................................................................................
import { createMuiTheme } from '#material-ui/core';
import overrides from './overrides';
import palette from './palette';
import typography from './typography';
const theme = createMuiTheme({
palette,
typography,
overrides,
});
export default theme;
import MuiChip from './MuiChip';
import MuiTooltip from './MuiTooltip';
export default {
MuiTooltip,
MuiChip
};
export default {
chip: {
fontFamily: ['prompt'].join(',')
}
};
You can override the default theme by using createMuiTheme and then wrap the component under as below
import { createMuiTheme } from '#material-ui/core/styles';
import { ThemeProvider } from '#material-ui/core';
const theme = createMuiTheme({
overrides: {
MuiChip: {
root: {
padding: '3px 4px',
fontFamily: "'Bree Serif', sans-serif",
fontSize: "15px"
},
},
},
});
export default Component = props => {
return (
<ThemeProvider theme={theme}>
<Chip size="small" label="Basic" />
</ThemeProvider>
);
}
Related
I began my project using #material-ui package and created a theme that was applied to my app properly
After switching to #mui theme is not applied anymore
theme definition:
import { createTheme } from '#mui/material/styles';
import "./fonts/fonts.module.css";
export const theme = createTheme({
palette: { ... },
shadows: ["none"],
typography: {
fontFamily: ...
button: {
textTransform: "none"
},
htmlFontSize: 16,
},
components: {
MuiCssBaseline: {
styleOverrides: {
fontFamily: "LatoLatinWeb"
}
}
}
});
Usage in MyComponent:
import { ThemeProvider } from "#mui/material/styles";
import { theme } from "../theme";
import { CssBaseline } from '#mui/material';
const MyComponent = () => {
...
return (
<ThemeProvider theme={theme}>
<CssBaseline/>
{children}
</ThemeProvider>
How can I fix this so the theme is applied?
Simplay add this
import CssBaseLine from '#mui/material/CssBaseline'
hi I have a customised chip component for material-UI app where i am changing the background and border color of the chip by using the grey object
now when I am switching to dark mode via the global theme
palette: {
type: "dark"
}
those colors not changing. is there some way to change those custome colors based if we are in light or dark mode?
import React, { useState } from 'react';
import grey from'#material-ui/core/colors/grey';
import {Chip} from "#material-ui/core";
import {withStyles} from "#material-ui/core/styles";
const MyChip = withStyles(theme =>({
root: {
backgroundColor:grey[100],
borderStyle: "solid",
borderWidth: "1px",
borderColor: grey[300]
},
}))(Chip);
const ChipComponent = ({...props}) => {
return <MyChip {...props} />
}
export default ChipComponent;
According to the solution of #BenStephens (see in the comments of the original question)
the solution is to add theme.palette.type === 'dark' ? grey[800] : grey[100] to the background /border colors
import React, { useState } from 'react';
import {Chip} from "#material-ui/core";
import { createMuiTheme } from '#material-ui/core/styles';
import {withStyles} from "#material-ui/core/styles";
import { useTheme } from '#material-ui/core/styles';
import grey from'#material-ui/core/colors/grey';
const MyChip = withStyles(theme =>({
root: {
backgroundColor:theme.palette.type=='dark'? grey["700"]:grey["100"],
borderStyle: "solid",
borderWidth: "1px",
borderColor: theme.palette.grey[300]
},
}))(Chip);
const ChipComponent = ({...props}) => {
return <MyChip {...props} />
}
export default ChipComponent;
I'm attempting to access my Material-UI theme props within a styled component, however I keep getting...
TypeError: Cannot read property 'primary' of undefined or similar errors in the browser.
Here is my custom theme (index.ts)
import { createMuiTheme } from "#material-ui/core";
import { blue } from "#material-ui/core/colors";
const theme = createMuiTheme({
palette: {
primary: {
main: blue[800],
contrastText: "#FFF"
},
secondary: {
main: blue[600],
contrastText: "#FFF"
}
},
typography : {
fontFamily: [
"Nunito",
"Roboto",
].join(",")
}
});
export default theme;
Here is where my theme wraps my application in the App.tsx
// Other imports
import theme from "../../app/theme/index";
const App: React.FC = () => {
return (
<>
<StylesProvider injectFirst>
<ThemeProvider theme={theme}>
// Routing stuff
</ThemeProvider>
</StylesProvider>
</>
);
};
export default App;
And here is where I am attempting to use my styled component
import { ListItem } from "#material-ui/core";
import React from "react";
import styled from "styled-components";
const Brand = styled(ListItem)`
background-color: ${props => props.theme.palette.primary.dark},
padding: ${props => props.theme.spacing(1)},
font-size: ${props => props.theme.typography.h6.fontSize},
font-weight: ${props => props.theme.typography.fontWeightMedium},
color: "white",
min-height: "64px",
padding-left: ${props => props.theme.spacing(6)}
`;
const SidebarNew: React.FC = () => {
return (
<Brand button>
// Stuff
</Brand>
);
};
export default SidebarNew;
This compiles but fails in the browser. What am I missing here?
If I use material-ui's built in styled like below, it appears to work, however I would prefer to use styled-components directly
const Brand = styled(ListItem)(({ theme }) => ({
backgroundColor: theme.palette.primary.dark,
padding: theme.spacing(1),
fontSize: theme.typography.h6.fontSize,
fontWeight: theme.typography.fontWeightMedium,
color: "white",
minHeight: 64,
paddingLeft: theme.spacing(6)
}));
You need to use ThemeProvider from styled-components (SCThemeProvider in the example below) in addition to the Material-UI ThemeProvider; otherwise styled-components won't know about your theme.
Here is a working example:
import {
createMuiTheme,
StylesProvider,
ThemeProvider
} from "#material-ui/core";
import { ThemeProvider as SCThemeProvider } from "styled-components";
import * as React from "react";
import Dashboard from "./Dashboard";
import "./styles.css";
const theme = createMuiTheme({
palette: {
primary: {
main: "#1a1aff",
contrastText: "#FFF"
},
secondary: {
main: "#ff3333",
contrastText: "#FFF"
}
},
typography: {
h5: {
fontSize: "10px"
}
}
});
export default function App() {
return (
<StylesProvider injectFirst>
<ThemeProvider theme={theme}>
<SCThemeProvider theme={theme}>
<Dashboard />
</SCThemeProvider>
</ThemeProvider>
</StylesProvider>
);
}
Is there a way to change the default body color
using CssBaseline in react material?
I don't want using like
typography: {
h2: {
color: "red",
},
},
but globally is this possible ?
I don't find any example.
UPDATE
It works with
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
"#global": {
body: {
backgroundColor: "red",
color: "green",
},
},
},
},
});
Watch out you must have CssBaseline nested to MuiThemeProvider
<MuiThemeProvider theme={theme}>
<CssBaseline />
<App />
</MuiThemeProvider>
Here is the example of how you can set background color globally, similarly you can add typography configurations in the theme
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import CssBaseline from "#material-ui/core/CssBaseline";
const theme = createMuiTheme({
palette: {
background: {
default: "#303030"
}
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<React.Fragment>
<CssBaseline />
<Your Componennt />
</React.Fragment>
</MuiThemeProvider>
);
}
Hope this works for you :)
Yes, brother, you can override everything globally in material UI, Here I write some Inputs, Buttons, Labels globally.
import React, { Component } from "react";
import { Box, CssBaseline } from "#material-ui/core";
import { createMuiTheme, MuiThemeProvider } from "#material-ui/core/styles";
import App from "../App";
class Layout extends Component {
/**
* Render
*/
render() {
const theme = createMuiTheme({
palette: {
secondary: {
light: "green",
main: "green",
dark: "green",
boxShadow: "none",
},
background: {
default: "red",
},
},
});
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Box component="div">
<App />
</Box>
</MuiThemeProvider>
);
}
}
export default Layout;
I'm trying to customize material ui tooltip for react storybook
I have tried changing some css properties like width, height, background color but failed to see those changes
import * as React from 'react';
import { createStyles, withStyles, Tooltip, IconButton } from '#material-ui/core';
const styles = (theme: any) => createStyles({
tooptip: {
width: "92px",
height: "36px",
borderRadius: "18px",
boxShadow: "0 20px 80px 0",
backgroundColor:"red"
}
});
interface ToolTipProps {
children?: JSX.Element[] | JSX.Element;
classes?: { [key:string]: string };
}
function ToolTip({ classes }: ToolTipProps): JSX.Element {
return (
<Tooltip title="Tooltip" classes={classes}>
<div>Hover</div>
</Tooltip>
);
}
export default withStyles(styles)(ToolTip);
I need to customize tooltip
import React from "react";
import { withStyles } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
import Tooltip from "#material-ui/core/Tooltip";
const styles = {
tooltip: {
width: "92px",
height: "36px",
borderRadius: "18px",
boxShadow: "0 20px 80px 0",
backgroundColor: "red"
}
};
const CustomTooltip = withStyles(styles)(Tooltip);
function MyCustomTooltip() {
return (
<CustomTooltip title="Tooltip">
<Button>Custom Tooltip</Button>
</CustomTooltip>
);
}
export default MyCustomTooltip;
Live demo
You have to do Typescript stuff by yourself. I don't use it, so I don't know how it should be done :).
Another way to customize material-ui components would be to use themes.
import { createMuiTheme } from "#material-ui/core/styles";
import lightGreen from "#material-ui/core/colors/lightGreen";
import lime from "#material-ui/core/colors/lime";
import teal from "#material-ui/core/colors/teal";
import yellow from "#material-ui/core/colors/yellow";
import deepOrange from "#material-ui/core/colors/deepOrange";
export default createMuiTheme({
palette: {
primary: lime,
secondary: teal,
error: deepOrange,
action: {
disabledBackground: teal[400]
},
text: {
primary: lightGreen[900],
secondary: teal[700],
disabled: yellow[600]
}
},
status: {
danger: "orange"
}
});
and then wrap your app / component implementation in material-ui ThemeProvider
import GardenTheme from './themes';
/* your story / component code */
return (
<ThemeProvider theme={GardenTheme}>
/* tooltip */
</ThemeProvider>
);
I wrote a short article on usage of material-ui themes on medium link