CODEWITHSUNDEEP
reactjstypescriptmaterial-uistyled-components
Tacro
Tacro

Reputation: 151

Transforming Material-UI Drawer with makeStyles into one with styled-component

I'm making react app with TypeScript, Material-UI and styled-components.

While implementing SideDrawer with Material-UI Drawer component, I'm rewriting codes which are originally with makeStyles to with styled-components since it's easier to maintain.
However, during this step, I have an issue in passing some props in styled-components.

I'm trying to cope with it, but no idea anymore.
Would anyone tell me what's wrong with it?

original code;

...
// styling
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    ...
    },
    appBar: {
      transition: theme.transitions.create(['margin', 'width'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
    },
    appBarShift: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
      transition: theme.transitions.create(['margin', 'width'], {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    ...
  }),
);

//tsx
...
<AppBar
    position="fixed"
    className={clsx(classes.appBar, {
     [classes.appBarShift]: open,
    })}
   >
    ...
</AppBar>
...

my code with styled-components;

//styled-components having $ as prefix
const $AppBar = styled(AppBar)<{open: boolean}>`
    transition: ${
        props => props.theme.transitions.create(['margin', 'width'], {
            easing: props.theme.transitions.easing.sharp,
            duration: props.theme.transitions.duration.leavingScreen,
        })
    };
　　/* 
    "Property 'props' does not exist on type
    'AppBarProps & { open: boolean; } & ThemeProps<any>'"
    I get this error and can't pass props properly.
   */
    ${({ open, props }) => open && `
        width: calc(100% - ${drawerWidth}px);
        margin-left: ${drawerWidth};
        transition: ${
　　　　　/* Then, VS Code tells "Parameter 'props' implicitly has an 'any' type." */
            props => props.theme.transitions.create(['margin', 'width'], {
                easing: props.theme.transitions.easing.easeOut,
                duration: props.theme.transitions.duration.enteringScreen,
            })
        };
    `}
`;
...
//tsx
<$AppBar
    position="fixed"
    open={open}
   >
    ...
</$AppBar>

Upvotes: 1

Views: 1498

Answers (1)

Tacro
Tacro

Reputation: 151

I've got thorough it like this way!
I mistakenly wrapped 'props' keyword with curly braces {}.

    const $AppBar = styled(AppBar)<{open: boolean}>`
    transition: ${
        props => props.theme.transitions.create(['margin', 'width'], {
            easing: props.theme.transitions.easing.sharp,
            duration: props.theme.transitions.duration.leavingScreen,
        })
    };
    ${(props) => props.open && `
        width: calc(100% - ${drawerWidth}px);
        margin-left: ${drawerWidth};
        transition: ${
                props.theme.transitions.create(['margin', 'width'], {
                easing: props.theme.transitions.easing.easeOut,
                duration: props.theme.transitions.duration.enteringScreen,
            })
        };
    `}
`;

Upvotes: 2

Related Questions