从 chrome 开发工具获取 CSS 作为 JavaScript object 值

Question

我们刚刚开始使用 material-ui 中的makeStyles钩子在我们的反应组件中编写 styles。

所以 css 现在不是常规的 css 而是 js object - 例如看起来像这样：

const useStyles = makeStyles(() =>
 createStyles({
     root: {
         display: 'flex'
     },
     divider:{
         width:'1px',
         backgroundColor:'rgba(44, 66, 107, 0.15)'
     }
 }),
);

不，以前 - 当我们使用 scss 文件时，有时我会在 chrome 开发工具上使用 styles “玩”：

当没问题时，我将其复制->粘贴到 scss 文件中。

当我在这里尝试做同样的事情时，我得到常规的 CSS 在 js object 中无效：

并且需要手动将其更改为有效的 js object 值：

（在此示例中手动更改很少，但在其他示例中可能会有很多更改......

looking for a way to get the styles from chrome dev tools as "JS" CSS styles and not "regular" CSS like now. 当然，我可以使用一些像这个很棒的手动解决方案：

https://css2js.dotenv.dev/

但我想避免所有这些复制粘贴

谢谢。

Answer 1

使用样式组件

允许您编写实际的 CSS 代码来设置组件的样式。

import styled from 'styled-components';

const Button = styled.button`
  color: grey;
`;

---

参考：MUI官方文档建议： https://material-ui.com/guides/interoperability/#styled-components