reactjs - 带有 MUI 的 CSS 伪选择器
问题描述
我在很多 MUI 代码中看到他们在他们的 react 样式组件中使用伪选择器。我以为我会尝试自己做,但我无法让它发挥作用。我不确定我做错了什么,或者这是否可能。
我正在尝试制作一些 CSS 来抵消这个元素对固定标题的影响。
import React from 'react';
import { createStyles, WithStyles, withStyles, Typography } from '@material-ui/core';
import { TypographyProps } from '@material-ui/core/Typography';
import GithubSlugger from 'github-slugger';
import Link from './link';
const styles = () =>
createStyles({
h: {
'&::before': {
content: 'some content',
display: 'block',
height: 60,
marginTop: -60
}
}
});
interface Props extends WithStyles<typeof styles>, TypographyProps {
children: string;
}
const AutolinkHeader = ({ classes, children, variant }: Props) => {
// I have to call new slugger here otherwise on a re-render it will append a 1
const slug = new GithubSlugger().slug(children);
return (
<Link to={`#${slug}`}>
<Typography classes={{ root: classes.h }} id={slug} variant={variant} children={children} />
</Link>
);
};
export default withStyles(styles)(AutolinkHeader);
解决方案
我发现内容属性需要像这样被双引号
const styles = () =>
createStyles({
h: {
'&::before': {
content: '"some content"',
display: 'block',
height: 60,
marginTop: -60
}
}
});
然后一切都按预期进行
推荐阅读
- node.js - 我一直有一个访问被拒绝的 Herkou 错误
- c# - 2d枪射击比它应该快得多
- python - 一个 Hot Encoder- 按类别分类
- jpa - Jpa 创建失败
- javascript - 状态更新不正确
- spring-boot - 使用 Spring Boot 应用程序进行弹性 APM 跟踪
- indexing - 菜单导航项从 .rst 索引文件中的菜单中消失
- react-native - 如何将图库视频路径转换为 base64 以在 s3 中上传
- javascript - 我正在尝试在 jQuery 中创建一个 switch case 默认函数
- flutter - 无法为设置文件加载已编译的类