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

标签 javascript css reactjs material-ui

我们刚刚开始使用 makeStyles 在我们的 React 组件中编写样式来自 Material-ui 的钩子(Hook)。

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

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

不,之前 - 当我们使用 scss 文件时,有时我会“玩弄”chrome 开发工具上的样式:

enter image description here 当没问题时,我将其复制->粘贴到 scss 文件中。

当我尝试在这里做同样的事情时,我得到了在 js 对象中无效的常规 CSS: enter image description here

并且需要手动更改它才能作为 js 对象值有效: enter image description here

(在这个示例中,手动更改很少,但在其他示例中,可能需要进行很多更改...

寻找一种方法从 chrome 开发工具获取样式作为“JS”CSS 样式,而不是像现在这样的“常规”CSS。 当然,我可以使用一些手动解决方案,例如这个很棒的解决方案:

https://css2js.dotenv.dev/

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

谢谢。

最佳答案

使用styled-components

allows you to write actual CSS code to style your components.

import styled from 'styled-components';

const Button = styled.button`
  color: grey;
`;
<小时/>

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

关于javascript - 从 chrome 开发工具获取 CSS 作为 JavaScript 对象值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61041401/

相关文章:

html - 内联 h3 将 ul 向右移动

javascript - 如何在 React setState 中使用方括号?

javascript - 为什么我可以将未知属性分配给 typescript 中的文字对象?

javascript - 设置默认值时,下拉菜单文本不显示 - AngularJS

javascript - 当我想将它添加到我的 Rails 应用程序时,我在哪里实现来自 codepen.io 的 JS 部分

javascript - 从 firebase onCall 云函数读取 Firestore 中的文档

javascript - 如何在 React Axios 中指定来自 WEB API 的 JSON 数据

javascript - 当我尝试使用 Firebase 使用 React 登录 google 时,为什么会出现网络错误

javascript - 使用 javascript 检测浏览器缩放级别

javascript - 如何确保文本始终位于图像之上(即使在调整大小时)?