我们刚刚开始使用 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 开发工具上的样式:
当我尝试在这里做同样的事情时,我得到了在 js 对象中无效的常规 CSS:
(在这个示例中,手动更改很少,但在其他示例中,可能需要进行很多更改...
寻找一种方法从 chrome 开发工具获取样式作为“JS”CSS 样式,而不是像现在这样的“常规”CSS。 当然,我可以使用一些手动解决方案,例如这个很棒的解决方案:
但我想避免所有这些复制粘贴
谢谢。
最佳答案
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/