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

Question

我们刚刚开始使用material-ui中的makeStyles钩子在我们的 react 组件中编写样式。所以现在的 css 不是普通的 css 而是 js 对象 - 例如看起来像这样：const useStyles = makeStyles(() => createStyles({     root: {         display: 'flex'     },     divider:{         width:'1px',         backgroundColor:'rgba(44, 66, 107, 0.15)'     } }),);不，以前 - 当我们使用 scss 文件时，有时我会“玩” chrome 开发工具上的样式：当没问题时，我将其复制->粘贴到 scss 文件中。当我在这里尝试做同样的事情时，我得到在 js 对象中无效的常规 CSS：并且需要手动将其更改为有效的 js 对象值：（在此示例中手动更改很少，但在其他示例中可能会有很多更改......寻找一种方法从 chrome 开发工具中获取样式作为“JS”CSS 样式，而不是像现在这样的“常规”CSS。当然，我可以使用一些像这个很棒的手动解决方案：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