Is it possible to use the ListContext in own components? - reactjs

Question

I would like to use the dense property of the ListContext to change the ListItemIcon fontSize. When I try to wrap the component in my own and import and use the context, the context is empty. The component is used inside as List/ListItem so it normally should have some values. I suppose it is because the ListContext is only use internally or am I wrong? In the case that I cannot use it what's a possible solution?
import React from 'react';
import MuiListItemIcon, {
ListItemIconProps as MuiListItemIconProps,
} from '#material-ui/core/ListItemIcon';
import ListContext from '#material-ui/core/List/ListContext';
const ListItemIcon: React.ForwardRefExoticComponent<MuiListItemIconProps> = React.forwardRef(
(props, ref) => {
const { children, ...other } = props;
const context = React.useContext(ListContext);
return (
<MuiListItemIcon ref={ref} {...other}>
{context.dense ? React.cloneElement(children, { fontSize: 'small' }) : children}
</MuiListItemIcon>
);
},
);
export default ListItemIcon;
// ...
<List dense>
<ListItem>
<ListItemIcon>
<IcoCreate />
<ListItemIcon>
</ListItem>
<ListItemText primary="Hello world!">
<List>
// ...
I expect the context to have a propery dense that is set to true, but the actual value is empty.

Answer 1

ListContext is considered private. In the Minimizing Bundle Size guide you can find the following:
Be aware that we only support first and second level imports. Anything below is considered private and can cause module duplication in your bundle.
Your import of ListContext is a third-level import (List would be second-level):
import ListContext from '#material-ui/core/List/ListContext';
While it "works" to import it, you are importing a duplicate copy of ListContext rather than the same one used by List which causes this to be a unique context type and is therefore unaffected by the setting of ListContext internal to Material-UI.
There are several ways you could achieve your desired result of dynamically adjusting the icon font-size based on whether or not it is within a dense list:
Create your own List wrapper (in addition to your ListItemIcon wrapper) with its own context type that you use in your ListItemIcon wrapper.
Use CSS (imitating what SvgIcon does internally based on the prop) to change the font-size rather than using the fontSize property as shown in my example below.
import React from "react";
import ReactDOM from "react-dom";
import List from "#material-ui/core/List";
import ListItem from "#material-ui/core/ListItem";
import ListItemText from "#material-ui/core/ListItemText";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import CreateIcon from "#material-ui/icons/Create";
import { withStyles } from "#material-ui/core/styles";
const SmallIconIfDense = withStyles(theme => ({
root: {
".MuiListItem-dense & .MuiSvgIcon-root": {
fontSize: theme.typography.pxToRem(20)
}
}
}))(ListItemIcon);
function App() {
return (
<>
<List dense>
<ListItem>
<SmallIconIfDense>
<CreateIcon />
</SmallIconIfDense>
<ListItemText primary="Hello dense list!" />
</ListItem>
<ListItem>
<SmallIconIfDense>
<CreateIcon />
</SmallIconIfDense>
<ListItemText primary="Hello second list item!" />
</ListItem>
</List>
<List>
<ListItem>
<SmallIconIfDense>
<CreateIcon />
</SmallIconIfDense>
<ListItemText primary="Hello non-dense list!" />
</ListItem>
<ListItem>
<SmallIconIfDense>
<CreateIcon />
</SmallIconIfDense>
<ListItemText primary="Hello second list item!" />
</ListItem>
</List>
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);