Currently, I am utilizing TypeScript(v4.2.3) along with Material UI(v4.11.3), and my objective is to pass custom props to the styled component.
import React from 'react';
import {
IconButton,
styled,
} from '@material-ui/core';
const NavListButton = styled(IconButton)(
({ theme, panelOpen }: { theme: Theme; panelOpen: boolean }) => ({
display: 'inline-block',
width: 48,
height: 48,
borderRadius: 24,
margin: theme.spacing(1),
backgroundColor: panelOpen ? theme.palette.secondary.dark : 'transparent',
}),
);
...
const Component: React.FC<Props> = () => {
return (
<NavListButton panelOpen={true} />
);
};
The functionality works smoothly, but upon checking the browser console, it shows an error message.
Warning: React does not recognize the `panelOpen` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `panelopen` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at button
at ButtonBase ...
Is there a way to resolve this issue without resorting to using the styled-components module and sticking to using styled from Material UI?
Additionally, another related query arises.
I have a requirement to incorporate media queries into styled components, however, when attempted, it throws a
TypeError: Cannot read property 'addRule' of nullconst PrintableTableContainer = styled(TableContainer)(() => ({
'@media print': {
'@page': { size: 'landscape' },
},
}));
https://i.stack.imgur.com/XtzcF.png
I also experimented with the following approach.
const PrintableTableContainer = styled(TableContainer)`
@media print {
@page { size: landscape }
}
`;
However, this alternative prompted the following error:
Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'CreateCSSProperties<(value: string, index: number, array: readonly string[]) => unknown> | ((props: { theme: Theme; } & ((value: string, index: number, array: readonly string[]) => unknown)) => CreateCSSProperties<...>)'.
Type 'TemplateStringsArray' is not assignable to type 'CreateCSSProperties<(value: string, index: number, array: readonly string[]) => unknown>'.
Types of property 'filter' are incompatible.
...