我创建了这个repl来演示这个问题.一个SVG只是内联添加的,工作正常,另一个作为组件导入,不能按预期工作.有什么关系呢?我如何才能让这个场景发挥作用?

推荐答案

问题在于样式的范围.由于SVG位于另一个组件中,父组件的样式不适用,因此您需要使用:global或使用css变量:

  .my-stuff-svg-container :global(svg) {
    color: white;
    height: 1rem;
    width: 1rem;
    transition: 0.25s ease;
  }

Html相关问答推荐

在 bootstrap 中的弹性项之间添加连接行

如何使用html和css将两个项目垂直对齐

如何在一张表中逃脱边境坍塌--崩溃?

调整一组IMG的大小以适应容器DIV

如果DIV没有特定的sibling 姐妹,则以CSS为目标

CSS:双面元素未正确显示边框

静态DIV的标签,显示从窗体输入的值

使用shinyjqui拖放到网格表中

带圆角帽的 CSS 部分边框

在选项标签中如何添加Django模板的条件

在HTML使用link标签导入外部CSS时出现元素link不允许使用尾斜杠错误

水平填充容器内的空间

表单中如何分别禁用/启用多个提交按钮?

Flex布局中,当父元素高度较高时,交叉轴上出现额外的空白问题.

如何垂直平移一个元素,使其新位置位于另外两个元素之间?

使用 R markdown 在 html 中包含图像

XPATH Select h2标签和

标签之间或h2标签和 标签之间的td元素,以立即为准

奇怪的幻影 div 命名为

不理解 CSS 中的 General sibling combinator (~)

文本输入在 Chrome 中保持水平滚动,带有文本溢出:省略号