Как использовать CSS пользовательских свойств в Material-UI?

Question

Я использую некоторые lo go из font-awesome с Material-UI.

Как показано ниже ...

const loader = require('fg-loadcss');
const skills = [
  {
    title: 'React-Native / Next ',
    className: 'fab fa-react',
    rating: 5,
    style: { fontSize: '1200%', color: '#61DBFB' },
  },
  {
    title: 'Python',
    className: 'fab fa-python',
    rating: 2,
    style: {
      fontSize: '1200%', 
      '--fa-secondary-opacity': 1, 
      '--fa-primary-color': '#306998',
      '--fa-secondary-color': '#FFD43B',
     },
  },

const Icons: NextPage = () => {
 const classes = useStyles();

 React.useEffect(() => {
    loader.loadCSS(
     'https://use.fontawesome.com/releases/v5.12.0/css/all.css',
      document.querySelector('#font-awesome-css'),
    );
  })

~~~~~~~~~~~~~

 skills.map(skill => (
    <Icon 
      className={skill.className}
      style={skill.style}
    />
  )

~~~~~~~~~~~

};
export default Icons;

Но, пользовательские свойства, такие как '--fa-primary цвет не может работать. Я хочу сделать иконки с официальным цветом lo go.

Скажите, пожалуйста, как я могу использовать, спасибо.