Doesn't play well with material-ui v4

[williammetcalf]

In the newest major update of Material-UI, there is a styled function that is somewhat similar to styled-components. When importing it like:

import { styled } from "@material-ui/styles"

the following error is thrown:

[0] const CloseButton = styled(IconButton)({
[0] ^
[0] 
[0] TypeError: styles_1.styled(...).withConfig is not a function
[0] 
[0]   57 | };
[0]   58 | 
[0] > 59 | const CloseButton = styled(IconButton)({
[0]   60 |   position: "absolute",
[0]   61 |   top: 10,
[0]   62 |   right: 10,
[0] 
[0]     at Object../src/common/SomeComponent (/.../SomeComponent.tsx:59:1)

However when the imported variable's name is changed, it works. example:

import { styled as matStyled } from "@material-ui/styles"

As best as I can tell this is happening because this babel plugin is seeing the styled import and transforming it.

[quantizor]

Fun. Any chance you could provide a repro sandbox?

[lpillonel]

I am facing the same problem (with m-ui 4)
...withConfig is not a function

EDIT: actually only with v 1.10.2 and not with 1.10.1

[tm1000]

Ref mui/material-ui#16091

[tm1000]

Same as @lpillonel I only ran into this when I deleted my package-lock or updated to 1.10.2

The issue is because of the change in #227. Material-ui styled components (which are not styled-components.. ish) look like this:

const AdjustButton = styled(IconButton)({
	marginLeft: 'auto',
});

In #227 this plugin now looks for styled(x)({}) where it previously did not. Thus it is catching material-ui...

'styled' in material-ui doesnt have a method withConfig. Looking at the code checks it looks like this plugin checks to make sure that is the case on most of them except styled(x)({}) (I didnt add a PR because I tried to add it manually and still had the error)

[quantizor]

Tangental issue, the core problem is we aren't checking the import correctly to make sure the import target is one of our whitelisted values in the case of styled as a named import. Will fix

[colemahatmccreary]

Says its merged, but I'm still getting this error

[JacobPotter]

I am running into this same issue with MUI 5. The workaround styled as matStyled works in this instance as well:

import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import InputBase from '@mui/material/InputBase';
import { alpha, styled as matStyled } from '@mui/material/styles';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

const Search = matStyled('div')(({ theme }) => ({
  position: 'relative',
  borderRadius: theme.shape.borderRadius,
  backgroundColor: alpha(theme.palette.common.white, 0.15),
  '&:hover': {
    backgroundColor: alpha(theme.palette.common.white, 0.25),
  },
  marginLeft: 0,
  width: '100%',
  [theme.breakpoints.up('sm')]: {
    marginLeft: theme.spacing(1),
    width: 'auto',
  },
}));

const SearchIconWrapper = matStyled('div')(({ theme }) => ({
  padding: theme.spacing(0, 2),
  height: '100%',
  position: 'absolute',
  pointerEvents: 'none',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}));

const StyledInputBase = matStyled(InputBase)(({ theme }) => ({
  color: 'inherit',
  '& .MuiInputBase-input': {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: '12ch',
      '&:focus': {
        width: '20ch',
      },
    },
  },
}));

export default function SearchAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="open drawer"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
          >
            tourMonkey
          </Typography>
          <Search>
            <SearchIconWrapper>
              <SearchIcon />
            </SearchIconWrapper>
            <StyledInputBase
              placeholder="Search…"
              inputProps={{ 'aria-label': 'search' }}
            />
          </Search>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

This is actually an example code from MUI docs for AppBar: https://mui.com/material-ui/react-app-bar/#app-bar-with-search-field