React Material-UI child class 伪
React Material-UI child class pseudo
有人知道如何在子元素中添加 ::after 吗?
CSS 我希望 运行:
dt {
float: left;
}
dt::after {
content: ":"
}
我的代码。 ::after
效果不佳。
const useStyles = makeStyles((theme: Theme) =>
createStyles({
dlist: {
'& dt': {
float: 'left',
'& dt::after': {
content: '":"',
},
},
},
}),
);
const Report = (props: any) => {
const styles = useStyles();
return (
<dl className={styles.dlist}>
<dt>JPY</dt>
<dd>100</dd>
<dt>USD</dt>
<dd>1</dd>
</dl>
)
}
您正在 & dt
中嵌套 & dt::after
。由于与号 (&
) 被评估为 select 或 & dt::after
的父代,因此它将被评估为 dlist dt dt::after
,这无法 select 任何元素.
不要将 & dt::after
对象嵌套在 & dt
中,而是尝试将对象移出 & dt
:
const useStyles = makeStyles((theme) => ({
dlist: {
"& dt": {
float: "left"
},
"& dt::after": {
content: '":"'
}
}
}));
有人知道如何在子元素中添加 ::after 吗?
CSS 我希望 运行:
dt {
float: left;
}
dt::after {
content: ":"
}
我的代码。 ::after
效果不佳。
const useStyles = makeStyles((theme: Theme) =>
createStyles({
dlist: {
'& dt': {
float: 'left',
'& dt::after': {
content: '":"',
},
},
},
}),
);
const Report = (props: any) => {
const styles = useStyles();
return (
<dl className={styles.dlist}>
<dt>JPY</dt>
<dd>100</dd>
<dt>USD</dt>
<dd>1</dd>
</dl>
)
}
您正在 & dt
中嵌套 & dt::after
。由于与号 (&
) 被评估为 select 或 & dt::after
的父代,因此它将被评估为 dlist dt dt::after
,这无法 select 任何元素.
不要将 & dt::after
对象嵌套在 & dt
中,而是尝试将对象移出 & dt
:
const useStyles = makeStyles((theme) => ({
dlist: {
"& dt": {
float: "left"
},
"& dt::after": {
content: '":"'
}
}
}));