How to put prefixes in material ui react in css?

Question

React

I use jss for styles in the project.

import { makeStyles } from "@material-ui/core";
import fonSideBar from 'images/fonSideBar.svg';

export const useSidebarStyles = makeStyles(theme => ({
    sidebarwrapper: {
        width: 288,
        minWidth: 288,
        minHeight: '100vh',
        maxHeight: '100vh',
        background: theme.main,
        display: 'flex',
        overflow: 'auto',
        flexDirection: 'column',
        position: 'sticky',
        top: 0,
    },
    sidebarLogo: {
        height: 62,
        marginTop: 39,
        marginBottom: theme.spacing(6),
        padding: '0 40px',

        '& svg': {
            cursor: 'pointer'
        }
    },
    tabs: {
        display: 'flex',
        flexDirection: 'column',
        width: '100%'
    },
    techSupport: {
        marginTop: 24,
        padding: '0 38px',
        background: `url(${fonSideBar}) no-repeat left bottom`,
        backgroundSize: '288px auto',
        paddingBottom: 300
    },
    techSupportText: {
        fontSize: 16,
        color: theme.light,
        marginBottom: theme.spacing(2),
    },
    techSupportInfo: {
        fontSize: 16,
        color: theme.light,
        fontWeight: 600,
        marginBottom: theme.spacing(1)
    },
    tabItem: {
        width: '100%',
        cursor: 'pointer',
        height: 46,
        marginBottom: theme.spacing(2),
        borderLeft: '6px solid transparent',
        transition: '.3s',

        '&:hover': {
            background: 'rgba(255,255,255,.05)',
            transition: '.3s'
        }
    },
    activeTabitem: {
        borderLeft: '6px solid #FF7271',

        '& > div div': {
            fontFamily: 'Proxima Nova Lt',
            fontWeight: 600
        }
    },
    tabContent: {
        display: 'flex',
        width: '100%',
        height: '100%',
        flexDirection: 'row',
        flexWrap: 'nowrap',
        paddingLeft: 32,
        alignItems: 'center',
    },
    icon: {
        width: 27,
        marginRight: theme.spacing(2),
        display: 'flex'
    },
    tabTitle: {
        fontWeight: 'normal',
        fontSize: 18,
        color: theme.light,
    },
    noWork: {
      opacity: 0.4
    },
    divider: {
        backgroundColor: 'rgba(255,255,255,.1)',
        marginBottom: 16
    }
}));

There was a need for prefixes to support safari. How can this be done in makeStyles()? Thanks in advance!

Answer 1

Hello there is a plugin for prefixes in the css-in-js documentation, here is the link to the official plugin