javascript - 如何在 React + Material-UI 元素中使用 CSS？

Question

我正在使用 Material-UI 库用 React(使用 TypeScript)编写一个元素。
我想使用动画提交按钮，替换库的默认按钮。为此，我改编了 this button , 我找到了 here , 在 React 中工作:我将 CSS 文件放在“样式”文件夹中，然后将其导入 Button 的 .tsx 文件中。我将 HTML 代码改编为 JSX，因此我的渲染方法如下所示:

return(
    <button className={`submit-button ${btnState}`} onClick={handleClickOpen}>
        <span className="pre-state-msg">Submit</span>
        <span className="current-state-msg hide">Sending...</span>
        <span className="done-state-msg hide">Done!</span>
    </button>
);

该按钮工作得很好，问题是导入 CSS 会破坏应用程序其他部分的其他内容(据我所知，只要容器不呈现包含自定义按钮的组件，它就会破坏 Container 组件)。
现在，我想这与 Material-UI 的工作原理有关，但我真的不知道如何解决这个问题。
我知道 Material-UI 建议通过 useStyles hook、withStyles 或类似的东西来使用 CSS-in-JS。事实是我不知道如何移植那个 CSS 文件以便这样使用它，我什至不知道这个解决方案是否支持所有 CSS 功能，例如元素>元素选择器、classList.add 等。
那么，为了解决这个问题，有没有办法在不破坏任何东西的情况下使用 CSS 文件呢？ This doc建议它可能，但我没有运气尝试。如果无法使用纯 CSS，是否可以将该代码转换为 CSS-in-JS，以某种方式我可以以编程方式修改元素的 className 或使用 classList.add 方法？
提前感谢任何愿意花一些时间阅读这个问题并尝试回答的人。

Answer 1

绝对有可能把那个 CSS 变成 JSS MUI 在后台使用。如果您在 JSS playground 中玩耍，这并不难。并查看生成的 CSS。例如:

keyframes short_press {
  to: { transform: rotate(360deg); }
}

.submit-button {
  display: block;
}

.submit-button:hover, .submit-button:focus {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.submit-button > span {
  display: block;
}

.submit-button.animated {

}

将会:

import { makeStyles } from '@material-ui/styles';

let useStyle = makeStyles({
  '@keyframes short_press': {
    to: { transform: 'rotate(360deg)' },
  },
  button: {
    display: 'block',
    '&:hover, &:focus': {
       boxShadow: '0 5px 15px rgba(0, 0, 0, 0.1)',
    },
    '& > span': {
       display: 'block',
    },
    '&.animated': {
      animation: '$short_press 1s infinite linear',
    }
  },});

function YourButton() {
  let css = useStyle();
  return (
    <button className={`${css.button} ${animated ? 'animated' : ''}`}>
      Click
    </button>
   );
}