Echo JS 0.11.0

<~>
tracker1 1213 days ago. link 1 point
Do *NOT* use a css file for this... use makeStyles and put it in/with your component.

    const useStyles = makeStyles((theme) => ({
      moreLinks: {
        width: '100%',
        borderRadius: 30,
        fontWeight: '700',
        justifyContent: 'unset',
        fontSize: 20,
        marginRight: 20,
        textTransform: 'inherit',
        color: 'black',
        height: 60,
        paddingLeft: 10,
        paddingRight: 30,
        marginBottom: 5,
        '& .MuiSvgIcon-root': {
          marginRight: 10,
        },
        '&:hover': {
          // ...
        }
        // ...
      }
    }));

    // inside component
      const classes = useStyles
      // ... passdown className to child render
      <SidebarLink className={classes.moreLinks} text="More" Icon={MoreHorizIcon} />

Replies