Im building a design system which uses Material UI under the hood. I need to customise the design of a disabled checkbox.
In this code why is the disabled style setting the color to gold not being applied?
import CheckboxMUI from '#material-ui/core/Checkbox';
import CheckBoxOutlineBlankIcon from '#material-ui/icons/CheckBoxOutlineBlank';
import FormControlLabel from '#material-ui/core/FormControlLabel';
const Checkbox = ({ label, onChange, checked, disabled }) => {
const theme = useTheme();
const useStyles = makeStyles({
root: {
color: theme.palette.secondary.main,
'&$disabled': {
color: 'gold',
},
},
});
const classes = useStyles();
return (
<div>
<FormControlLabel
disabled={disabled}
classes={{
root: classes.root,
}}
control={
<CheckboxMUI
disabled={disabled}
checked={checked}
onChange={onChange}
name="checkedA"
color="primary"
icon={
<CheckBoxOutlineBlankIcon
htmlColor={!disabled ? theme.palette.secondary.main : undefined}
/>
}
/>
}
label={label}
/>
</div>
);
};
Material UI's <Checkbox> allows you to provide custom elements for the icon, checkedIcon and indeterminateIcon. In your case, something along these lines would solve your problem:
import React from 'react'
import {
Checkbox as MUICheckbox,
CheckboxProps,
SvgIcon,
} from '#material-ui/core'
import { ReactComponent as CheckboxChecked } from 'assets/svg/ui/CheckboxChecked.svg'
import { ReactComponent as CheckboxUnchecked } from 'assets/svg/ui/CheckboxUnchecked.svg'
import { ReactComponent as CheckboxIndeterminate } from 'assets/svg/ui/CheckboxIndeterminate.svg'
import { ReactComponent as CheckboxDisabled } from 'assets/svg/ui/CheckboxDisabled.svg'
export default function Checkbox(props: CheckboxProps) {
return (
<MUICheckbox
checkedIcon={<SvgIcon component={CheckboxChecked} />}
indeterminateIcon={<SvgIcon component={CheckboxIndeterminate} />}
icon={
<SvgIcon
component={props.disabled ? CheckboxDisabled : CheckboxUnchecked}
/>
}
{...props}
/>
)
}
Which you would then use as follows (which is exactly how I solved this problem):
<Checkbox
disabled={someCondition}
/>
This worked for me:
const useStyles = makeStyles({
root: {
color: theme.palette.secondary.main,
},
label: {
'&.Mui-disabled': {
color: theme.colors.disabledForeground,
},
},
});
<FormControlLabel
disabled={disabled}
classes={{
root: classes.root,
label: classes.label,
}}
Related
I am using Mui and Gatsby.
I have created the theme in a layout.js like so:
const Layout = ({ children, location, pageTitle, crumbs }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`)
return (
<>
<ThemeProvider theme={theme}>
<Header siteTitle={data.site.siteMetadata?.title || `Title`} />
<CssBaseline />
<Main >
<CustomBreadcrumbs
crumbLabel={pageTitle}
location={location}
crumbs={crumbs}
/>
{children}</Main>
<footer
style={{
marginTop: `2rem`,
}}
>
© {new Date().getFullYear()}, Built with
{` `}
Gatsby
</footer>
</ThemeProvider>
</>
)
}
I have a page component, that has some styles, and are trying to pass theme to page template but when I check the props from the page template Component, theme is undefined and I can also not use it in the styles object I have created.
Page template is like this:
class ProductDetail extends React.Component {
render() {
console.log(this.props)
const product = get(this.props.data, 'contentfulProduct')
const { classes } = this.props
const {
breadcrumb: { crumbs },
} = this.props.pageContext
let images = []
if (product.packagePhoto) {
images.push(product?.packagePhoto)
}
if (product.kibblePhoto) {
images.push(product?.kibblePhoto)
}
if (product.productPhoto) {
images.push(product?.productPhoto)
}
if (product.ambPhoto) {
images.push(product?.ambPhoto)
}
return (
<Layout location={this.props.location} pageTitle={`${product.brand.brandName} ${product.name}`} crumbs={crumbs}>
....some code here
</Layout>
)
}
}
export default withStyles(styles, { withTheme: true })(ProductDetail)
I can not use theme in styles object in page template:
const styles = theme => ({
root: {
width: '100%'
},
paragraph: {
marginBottom: '20px'
},
halfWidthParagraph:{
marginBottom: '20px',
width: '50%',
/* [theme.breakpoints.down('sm')]:{
width: '100%'
} */
}
})
How can I load the "theme" into the Page Component and use it in the styles object?
I am recently getting started with Next JS. for styling, I am using Material UI. one issue I am facing is with the fonts. I couldn't able to change the font family to a different font. as per the below example (Github link), I created a _document.js page inside my pages folder
https://github.com/mui-org/material-ui/tree/master/examples/nextjs/pages
_document.js
in the below code I tried changing Roboto with Quicksand
import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "#material-ui/core/styles";
// import theme from "../components/Theme.js";
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
{/* PWA primary color */}
{/* <meta name="theme-color" content={theme.palette.primary.main} /> */}
<link
rel="stylesheet"
// href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [
...React.Children.toArray(initialProps.styles),
sheets.getStyleElement(),
],
};
};
Also, I customized my MUI theme object as below
const theme = createMuiTheme({
palette: {
type: "dark",
background: {
default: "#212121",
},
typography: {
fontFamily: "Quicksand",
},
},
});
Layout.js
import { createMuiTheme } from "#material-ui/core/styles";
import { ThemeProvider } from "#material-ui/styles";
import { makeStyles } from "#material-ui/core/styles";
import CssBaseline from "#material-ui/core/CssBaseline";
import Container from "#material-ui/core/Container";
import Divider from "#material-ui/core/Divider";
import NavBar from "./NavBar.js";
import Footer from "./Footer.js";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexDirection: "column",
minHeight: "100vh",
},
main: {
marginTop: theme.spacing(0),
marginBottom: theme.spacing(10),
},
}));
const theme = createMuiTheme({
palette: {
type: "dark",
background: {
default: "#212121",
},
typography: {
fontFamily: "Quicksand",
},
},
});
function Layout({ children }) {
const classes = useStyles();
return (
<div className={classes.root}>
<ThemeProvider theme={theme}>
<CssBaseline />
<Container component="main" className={classes.main} maxWidth="md">
<NavBar />
<Divider />
{children}
<Divider />
<Footer />
</Container>
</ThemeProvider>
</div>
);
}
export default Layout;
But no luck. can anyone please advise?
Thanks In Advance
Venk
You can wrap your in _app.js with a ThemeProvider.
Example _app.js:
import '../styles/globals.scss'
import { motion, AnimatePresence } from 'framer-motion'
import { useRouter } from 'next/router'
import Header from '../components/Header'
import { AuthProvider } from '../contexts/AuthContext'
import { CartProvider } from '../contexts/CartContext'
import { ThemeProvider } from '#material-ui/core'
import theme from '../styles/theme'
export default function App({ Component, pageProps }) {
const router = useRouter()
return(
<AnimatePresence exitBeforeEnter>
<CartProvider>
<AuthProvider>
<ThemeProvider theme={theme}>
<Header />
<motion.div key={router.pathname} className="main">
<Component { ...pageProps } />
</motion.div>
</ThemeProvider>
</AuthProvider>
</CartProvider>
</AnimatePresence>
)
}
Example theme file:
import { createTheme, responsiveFontSizes } from "#material-ui/core"
let theme = createTheme({
palette: {
primary: {
main: '#0277bd',
},
secondary: {
main: '#b2ff59',
},
darkGray: {
main: '#333333'
},
},
})
theme = responsiveFontSizes(theme)
export default theme
I'm not sure how you understand the Mui theme concept. Let's just talk about NextJs first.
NextJs is no different from React. To set the global font-family you just have to put font-family: your desired font into the html, body {} block inside the global.css which is already imported at the top level of _app.js. Every component will use that global font unless it has custom styles. Example:
html, body {
padding: 0;
margin: 0;
font-family: Quicksand, cursive;
}
Now, with Mui, components use a designed style system which conclude default font option as well. To inject your custom style into every single Mui's component you need to wrap all of them inside a top/root level <ThemeProvider theme={yourCutomTheme}> component to override the defaults, reference: Custom Theming from Mui official doc.
Things are not that complicated tho.
In Nextjs V10+ with material-ui
_document.js
Don't forget to add this link tag before your fonts for improving the performance
<link rel="preconnect" href="https://fonts.gstatic.com" />
_app.js
add the override object to make your font a global font in your app instead of Roboto the default
const theme = responsiveFontSizes(
createMuiTheme({
// your custom UI Config ,
typography: {
fontFamily: "Quicksand",
},
overrides: {
MuiCssBaseline: {
"#global": {
"#font-face": [
{
fontFamily: "Quicksand",
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: // your font weight,
},
],
},
},
},
})
)
Here is what worked for me with Google Fonts, MUI v5, NextJs v13 (TS)
https://nextjs.org/docs/api-reference/next/font
https://mui.com/material-ui/customization/typography/#adding-amp-disabling-variants
Add primary and secondary variant to theme
import { Barlow, Cormorant } from "#next/font/google";
export const barlow = Barlow({
weight: ["200", "400", "500", "600", "700"],
display: "swap",
fallback: ["Helvetica", "Arial", "sans-serif"],
});
export const cormorant = Cormorant({
weight: ["300", "400", "500", "600", "700"],
display: "swap",
fallback: ["Times New Roman", "Times", "serif"],
});
declare module "#mui/material/styles" {
interface TypographyVariants {
primary: React.CSSProperties;
secondary: React.CSSProperties;
}
interface TypographyVariantsOptions {
primary?: React.CSSProperties;
secondary?: React.CSSProperties;
}
}
declare module "#mui/material/Typography" {
interface TypographyPropsVariantOverrides {
primary: true;
secondary: true;
}
}
let theme = createTheme({
typography: {
fontFamily: barlow.style.fontFamily,
body1: {
fontFamily: barlow.style.fontFamily,
},
primary: {
fontFamily: barlow.style.fontFamily,
},
secondary: {
fontFamily: cormorant.style.fontFamily,
},
},
});
in component as sx prop
<Typography
sx={{
fontFamily: theme.typography.secondary.fontFamily,
}}
>
More About Us:
</Typography>
cormorant overides the default
or props
<Typography
variant="secondary"
>
More About Us:
</Typography>
I'm looking for a text field with multiple inputs as:
Here as you can see I can add new text and on press of enter it saves that keyword.
Can someone guide which package to look for.... I found something similar in material ui autocomplete's costomized hook: https://material-ui.com/components/autocomplete/,
but I don't want it to be drop down I want it to be simply be a text field with option as shown in image.
I cannot find with such functionality or I might be looking work as I don't know proper term for it.
Any guidance will be of great help.
I've included material-ui , reactstrap as this is something I have worked with so if there is any other package also let me know
I was also building something like this few days back. This is what I've built till now.
import {
Chip,
FormControl,
Input,
makeStyles,
} from "#material-ui/core";
import React, { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const classes = useStyles();
const [values, setValues] = useState(["test"]);
const [currValue, setCurrValue] = useState("");
const handleKeyUp = (e) => {
console.log(e.keyCode);
if (e.keyCode == 32) {
setValues((oldState) => [...oldState, e.target.value]);
setCurrValue("");
}
};
useEffect(() => {
console.log(values);
}, [values]);
const handleChange = (e) => {
setCurrValue(e.target.value);
};
const handleDelete = ( item, index) =>{
let arr = [...values]
arr.splice(index,1)
console.log(item)
setValues(arr)
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<FormControl classes={{ root: classes.formControlRoot }}>
<div className={"container"}>
{values.map((item,index) => (
<Chip size="small" onDelete={()=>handleDelete(item,index)} label={item}/>
))}
</div>
<Input
value={currValue}
onChange={handleChange}
onKeyDown={handleKeyUp}
/>
</FormControl>
</div>
);
}
const useStyles = makeStyles((theme) => ({
formControlRoot: {
display: "flex",
alignItems: "center",
gap: "8px",
width: "300px",
flexWrap: "wrap",
flexDirection: "row",
border:'2px solid lightgray',
padding:4,
borderRadius:'4px',
"&> div.container": {
gap: "6px",
display: "flex",
flexDirection: "row",
flexWrap: "wrap"
},
"& > div.container > span": {
backgroundColor: "gray",
padding: "1px 3px",
borderRadius: "4px"
}
}
}));
Here is the working demo:
One possible way to do this using react-hook-form and Autocomplete using the Chip with renderTags function here is an example:
import {
Box,
TextField,
Autocomplete,
Chip,
} from '#mui/material'
...
const {
handleSubmit,
control,
formState: { errors },
} = useForm()
...
<Box mt={2}>
<Controller
control={control}
name="tags"
rules={{
required: "Veuillez choisir une réponse",
}}
render={({ field: { onChange } }) => (
<Autocomplete
defaultValue={
useCasesData?.tags ? JSON.parse(useCasesData?.tags) : []
}
multiple
id="tags-filled"
options={[]}
freeSolo
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip
variant="outlined"
label={option}
{...getTagProps({ index })}
/>
))
}
onChange={(event, values) => {
onChange(values);
}}
renderInput={(params) => (
<TextField
{...params}
label="Métadonnées"
placeholder="Ecriver les métadonnées"
helperText={errors.tags?.message}
error={!!errors.tags}
/>
)}
/>
)}
/>
</Box>
I have a header and want to style all of it's buttons differently than my global theme. I have tried using a child theme like:
<ThemeProvider
theme={(outerTheme) =>
_.merge(outerTheme, {
overrides: {
MuiButton: {
label: {
color: "#fff",
},
},
},
})
}
>
However, while I had expected this to override only MuiButton's in the child theme, it overrode them in them globally.
I know I can use makeStyles but, then, as far as I know, I have to reference it in all the child components which want to use the style. I'd like to wrap a higher level component and have all child components pick up the style. How is this done?
You can do this:
import Button from '#material-ui/core/Button';
import { purple } from '#material-ui/core/colors';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
header: {
"& button": {
marginRight: theme.spacing(1),
color: theme.palette.getContrastText(purple[500]),
backgroundColor: purple[500],
"&:hover": {
backgroundColor: purple[700],
},
},
},
});
function CustomHeader(props) {
const classes = useStyles();
return (
<div className={classes.header}>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button disabled>Button 3</Button>
</div>
)
};
Thinking of the concept of a SASS mixin, what would be the best approach to enable the re-use of style blocks that incorporate the current theme.
For example I have two components that import their respective styles:
Component 1
index
styles
Component 2
index
styles
Each component has a text block
Component 1
import { styles } from './styles'
....
<div className={classes.richText}>...</div>
Component 2
import { styles } from './styles'
....
<div className={classes.richText}>...</div>
The styles for richText are the same but I would rather not duplicate them in the imported styles file.
I would rather have a single file that exposes reusable CSS properties based on the theme.
The only way I can currently do this is by returning an object that I have passed the theme to e.g.
const RichText = (theme) => {
return {
fontWeight: 100,
color: theme.typography.body1.color
}
}
Then import this into the styles
Component 1
styles.js
import { RichText } from '../mixins/'
const styles = theme => ({
richText: {
...RichText(theme),
fontSize: '1rem'
}
Component 2
styles.js
import { RichText } from '../mixins/'
const styles = theme => ({
richText: {
...RichText(theme),
fontSize: '1.2rem'
}
Feels like there has to be a better way: utilising withTheme() maybe?
Let's say you want to custom a checkbox as below:
import { makeStyles } from '#material-ui/core/styles';
import CheckBox from '#material-ui/core/CheckBox';
const useStyles = makeStyles((theme) => ({
root: {
color: theme.status.danger,
'&$checked': {
color: theme.status.danger,
},
},
checked: {},
}));
function CustomCheckbox() {
const classes = useStyles();
return (
<Checkbox
defaultChecked
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
);
}
And you want to reuse its style as many components as you can.
You have two options: ThemeProvider or export your custom style.
Changing the component's theme
Themes let you apply a consistent tone to your app. It allows you to customize all design aspects of your project in order to meet the specific needs of your business or brand.
import { createMuiTheme, ThemeProvider } from '#material-ui/core/styles';
import orange from '#material-ui/core/colors/orange';
const myTheme = createMuiTheme({
status: {
danger: orange[500],
},
});
export default function CustomStyles() {
return (
<ThemeProvider theme={myTheme}>
<CustomCheckbox />
</ThemeProvider>
);
}
Exporting your custom styles
Separate your components in a proper folder, i.e: ./assets/styles:
import { makeStyles } from '#material-ui/core/styles';
export const useCheckBoxStyles = makeStyles((theme) => ({
root: {
color: theme.status.danger,
'&$checked': {
color: theme.status.danger,
},
},
checked: {},
}));
And your components tree ./components:
import { useCheckBoxStyles } from './assets/styles';
function CustomCheckbox() {
const classes = useCheckBoxStyles();
return (
<Checkbox
defaultChecked
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
);
}
References
https://material-ui.com/customization/theming