I'm starting a new Hydrogen project ( Shopify React ). I wanted to use the Material UI lib for my project.
Here is my "basic" code :
import * as React from 'react';
import { styled } from '#mui/material/styles';
import Box from '#mui/material/Box';
import Paper from '#mui/material/Paper';
import Grid from '#mui/material/Grid';
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
}));
export default function Home() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={4}>
<Item>xs=4</Item>
</Grid>
<Grid item xs={8}>
<Item>xs=8</Item>
</Grid>
</Grid>
</Box>
)
}
And the error I'm getting :
Warning: Only plain objects can be passed to client components from server components. Classes or other objects with methods are not supported. Remove sheet from these props: {key: "css", sheet: {\_insertTag: function, isSpeedy: false, tags: \[...\], ctr: 0, nonce: undefined, key: "css", container: undefined, ...}, nonce: undefined, inserted: {...}, registered: {...}, insert: function}
Error processing route: http://localhost:3000/rx
Error: Functions cannot be passed directly to client components because they're not serializable. Remove \_insertTag (function) from this object, or avoid the entire object: {\_insertTag: function, isSpeedy: false, tags: \[...\], ctr: 0, nonce: undefined, key: "css", container: undefined, ...}
at resolveModelToJSON (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=fa4e9613:1515:13)
at StyleSheet.toJSON (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=fa4e9613:1029:14)
at stringify (\<anonymous\>)
at processModelChunk (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=fa4e9613:164:14)
at retryTask (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=fa4e9613:1625:26)
at performWork (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=fa4e9613:1658:7)
at eval (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=fa4e9613:1755:12)
at scheduleWork (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=fa4e9613:58:3)
at startWork (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=fa4e9613:1754:3)
at Object.start (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=fa4e9613:1866:7)
at setupReadableByteStreamController (node:internal/webstreams/readablestream:3110:23)
at setupReadableByteStreamControllerFromSource (node:internal/webstreams/readablestream:3147:3)
at new ReadableStream (node:internal/webstreams/readablestream:250:7)
at Module.renderToReadableStream (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=fa4e9613:1863:16)
at runRSC (/node_modules/#shopify/hydrogen/dist/esnext/entry-server.js?v=fa4e9613:598:46)
at processRequest (/node_modules/#shopify/hydrogen/dist/esnext/entry-server.js?v=fa4e9613:200:15)
at handleRequest (/node_modules/#shopify/hydrogen/dist/esnext/entry-server.js?v=fa4e9613:163:26)
/.../node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
throw ex;
^
TypeError: Cannot read properties of undefined (reading 'null')
at getOrCreateServerContext (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=fa4e9613:116:23)
at resolveProvider (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=fa4e9613:395:51)
at processFullRow (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=fa4e9613:469:9)
at processBinaryChunk (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=fa4e9613:513:5)
at progress (/node_modules/#shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=fa4e9613:566:5)
The problem seems to be related to the lib, when I use basic balise, I'm not facing any issues.
Thanks !
Related
I have 2 components:
1 is the treeview created as follows:
const renderTree = (nodes) => (
<TreeItem key={nodes.id} nodeId={nodes.id ? nodes.id : "defaultNodeId"} label={nodes.name ? nodes.name : "defaultNodeName"}
>
{Array.isArray(nodes.children)
? nodes.children.map((node) => renderTree(node))
: null}
</TreeItem>
);
<TreeView
aria-label="gmail"
defaultCollapseIcon={<ArrowDropDownIcon />}
defaultExpandIcon={<ArrowRightIcon />}
defaultEndIcon={<div style={{ width: 18 }} />}
defaultExpanded={['72']}
sx={{ height: 'auto', flexGrow: 1, maxWidth: 250, overflowY: 'auto' }}
onNodeSelect={handleSelectedItems}
>
{renderTree(data)}
</TreeView>
2 is the datagrid created as follows:
<DataGrid
rows={gridrows}
columns={columns}
pageSize={10}
rowsPerPageOptions={[10]}
{/*//checkboxSelection*/}
{/*//disableRowSelectionOnClick*/}
/>
When I click on the node on the TreeView, the below function will be executed:
const handleSelectedItems = (event, nodeId) => {
console.log('ON fetchGridData', nodeId);
event.preventDefault();
event.stopPropagation();
fetchGridData(nodeId);
event.preventDefault();
event.stopPropagation();
}
I have selected the data, but Treenode does not expand. Does anyone know what the error is? Please help me
I was able to select data and fill in datagrid, but every time I fill the treeview doesn't open node expand
I am using MUI's Text Field component and found there's literally no way to copy the label contents. Is there a way to copy the label somehow?
See the demo here: https://codesandbox.io/s/4ou0l7?file=/demo.tsx
Thanks
It is because material UI is disabling the label selection using CSS.
You can enable it back in a few ways. You can enable it for a certain field or across all of them using the material UI theme override ability.
In order to enable label selection only to one field, you have pass an additional prop to your TextField: InputLabelProps={{ sx: { userSelect: "text" } }}
And here I have provided you with the second way to do that for all the text fields:
import * as React from "react";
import Box from "#mui/material/Box";
import TextField from "#mui/material/TextField";
import { createTheme, ThemeProvider } from "#mui/material/styles";
const theme = createTheme({
components: {
MuiInputLabel: {
styleOverrides: {
root: {
userSelect: "text"
}
}
}
}
});
const StateTextFields = () => {
const [name, setName] = React.useState("Cat in the Hat");
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setName(event.target.value);
};
return (
<Box
component="form"
sx={{
"& > :not(style)": { m: 1, width: "25ch" }
}}
noValidate
autoComplete="off"
>
<TextField
id="outlined-name"
label="Name"
value={name}
onChange={handleChange}
/>
<TextField
id="outlined-uncontrolled"
label="Uncontrolled"
defaultValue="foo"
/>
</Box>
);
};
export default () => (
<ThemeProvider theme={theme}>
<StateTextFields />
</ThemeProvider>
);
Of course, you can extract this ThemeProvider into a separate file and wrap with it the whole project, not only this file. It is combined just for the example.
I found a way that this can be done using the helperText and my solution is more of a hack. I am using the helperText and positioning it where the label was used to be, giving it a background and bringing it to front using z-index.
Also you can either choose to use the label or replace it with the placeholder depending if you are happy with the animation.
Here is a codesandbox based on your code in case you need it.
<TextField
id="outlined-name"
label="Name"
// placeholder="Name"
value={name}
onChange={handleChange}
helperText="Name"
sx={{
"& .MuiFormHelperText-root": {
top: "-11px",
position: "absolute",
zIndex: "1",
background: "white",
padding: "0 4px",
}
}}
/>
I am using Material UI's Autocomplete/TextField and I want to override its default CSS on hover and when the text field is in focus state.
Default CSS:
Image for default CSS in focused state
I want to change this blue colour when input box is in focus state.
I have tried using ThemeProvider/createTheme hook but it is not helping. Below is the code for createTheme:
import { ThemeProvider, createTheme } from "#mui/material/styles";
const overrideTheme = createTheme({
overrides: {
MuiInput: {
root: {
"&$focused": {
borderColor: "red",
},
},
},
},
});
export default function AutocompleteComponent() {
return (
<ThemeProvider theme={overrideTheme}>
<Autocomplete
classes={classes}
freeSolo
id="free-solo-2-demo"
options={
autocompleteResult ? top100Films.map((option) => option.title) : []
}
renderInput={(params) => (
<TextField
variant="outlined"
{...params}
placeholder="Search..."
InputProps={{
...params.InputProps,
type: "search",
classes: {
root: classes.root,
notchedOutline: classes.notchedOutline,
},
className: classes.input,
endAdornment: false,
}}
/>
)}
/>
</ThemeProvider>
);
}
You have to use the browser dev tools to identify the slot for the component you want to override. Once that's done, you write a CSS file with the class you want to change.
To force the class you can use :
!important
file : styles.css
exemple:
.css-1q6at85-MuiInputBase-root-MuiOutlinedInput-root{
border-radius: 50px!important;
}
Material UI explains Display in their docs as a way to Quickly and responsively toggle the display value of components!
I have an icon that i want it to be hidden on xs. I am trying
display={{ xs: 'none', sm: 'block' }} its not working.
I am trying display='none' just to see if it hides, also not working. If i set a className={classes.icon} and then i create an icon class in useStyles
icon: {
display: none,
},
the icon is hidden.
The behaviour is making me go crazy but am sure i am missing a concept on how these things rended or something is overriding the behaviour.
Also i dont know how to use display={{ xs: 'none', sm: 'block' }} inside the useStyle as double brackets are not allowed there
Here is full code:
const useStyles = makeStyles((theme) => ({
icon: {
paddingRight: 10,
color: 'white',
display: 'none', //setting this hides the icon
},
}
<Grid item container xs={12}>
<AccountBalanceIcon fontSize='large' className={classes.icon} display={{ xs: 'none', sm: 'block' }}/>
</Grid>
You can hide the AdbIcon when the screen's width becomes xs by using [theme.breakpoints.only("xs")] in the useStyles hook :-
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import {
Box
} from '#material-ui/core';
import AdbIcon from '#material-ui/icons/Adb';
const useStyles = makeStyles((theme) => ({
icon: {
color: 'red',
[theme.breakpoints.only("xs")]: {
display: "none",
},
}
}));
export default function ButtonSizes() {
const classes = useStyles();
return (
<AdbIcon
fontSize="large"
className={classes.icon}
/>
);
}
Read about all the breakpoint queries that are given by material-ui here
'display' property belongs to 'Box' component, not the Icon component.. I.e. the Icon must be wrapped in the Box component. The following sample works:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import {
Box
} from '#material-ui/core';
import AdbIcon from '#material-ui/icons/Adb';
const useStyles = makeStyles((theme) => ({
icon: {
color: 'red',
//display: 'none',
}
}));
export default function ButtonSizes() {
const classes = useStyles();
return (
<Box
display="block"
//display="none"
>
<AdbIcon
fontSize="large"
className={classes.icon}
/>
</Box>
);
}
I am following the example here [1] to create a custom theme using Material-UI. On Line 10 in App.js [2] it references color="textSecondary", can someone explain where the value textSecondary comes from?
I was able to get the example to work using:
style={{ color: theme.palette.secondary.light }}
but I'd prefer to be able to use the shorter syntax reference.
Full App.js code below:
import React from 'react';
import Container from '#material-ui/core/Container';
import Typography from '#material-ui/core/Typography';
import Box from '#material-ui/core/Box';
import ProTip from './ProTip';
import Link from '#material-ui/core/Link';
import theme from './theme';
function MadeWithLove() {
return (
<Typography variant="body2" style={{ color: theme.palette.secondary.light }} align="center">
{'Built with love by the '}
<Link color="inherit" href="https://material-ui.com/">
Material-UI
</Link>
{' team.'}
</Typography>
);
}
export default function App() {
return (
<Container maxWidth="sm">
<Box my={4}>
<Typography variant="h4" component="h1" gutterBottom>
Create React App v4-beta example
</Typography>
<ProTip />
<MadeWithLove />
</Box>
</Container>
);
}
My theme.js file is:
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
palette: {
primary: {
light: '#6fbf73',
main: '#4caf50',
dark: '#357a38',
contrastText: '#fff',
},
secondary: {
light: '#5464c0',
main: '#2a3eb1',
dark: '#1d2b7b',
contrastText: '#000',
},
},
});
export default theme;
[1] https://github.com/mui-org/material-ui/tree/master/examples/create-react-app
[2] https://github.com/mui-org/material-ui/blob/master/examples/create-react-app/src/App.js#L10
If you have a look at the documentation for Typography component, you can provide several options for the color prop:
name: color
type: enum: 'initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error'
default: 'initial'
description: The color of the component. It supports those theme colors that make sense for this component.
textSecondary is defined here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Typography/Typography.js#L92 as
theme.palette.text.secondary