如何在React+Material UI项目中使用CSS

Question

我正在使用Material UI库用React(使用TypeScript(编写一个项目。

我想使用一个动画提交按钮，取代库的默认按钮。为了做到这一点，我调整了我在这里找到的这个按钮，使其在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的工作方式有关，但我真的不知道如何解决这个问题。

我知道MaterialUI建议通过useStyles挂钩、withStyles或类似的东西在JS中使用CSS。事实上，我不知道如何移植该CSS文件以便这样使用它，我甚至不知道该解决方案是否支持所有CSS功能，例如element>元素选择器、classList.add等

那么，为了解决这个问题，有没有一种方法可以在不破坏任何东西的情况下使用CSS文件？这位医生认为这是可能的，但我没有尝试。如果不能使用纯CSS，是否可以在JS中将该代码转换为CSS，以某种方式我可以通过编程修改元素的className或使用classList.add方法？

提前感谢任何愿意花点时间阅读这个问题并尝试回答的人。

Answer 1

将CSS转换为MUI在后台使用的JSS是绝对可能的。如果你在JSS操场上玩，看到生成的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>
);
}