styling 相关问题

样式化是将可视元数据绑定到文档的过程

带续行的赋值

当变量嵌套了几层、名称相当长并且被分配的值/表达式相当长时，为变量赋值的首选样式是什么？对于e...

python styling pep

回答 2 投票 0

Rider 打开文件时默认自动折叠文档注释

我正在 Rider 中处理一个项目，每当我打开任何文件时，它都会包含文档注释。默认情况下，这些评论是展开的，但我更喜欢在打开时自动折叠它们

c# ide jetbrains-ide styling rider

回答 1 投票 0

CSS 背景过滤器：锚标记的模糊（）在 Chrome 浏览器中不起作用

锚标记显示为具有透明背景和白色边框的按钮。我正在使用 .class 进行样式设置。背景属性在 Firefox 浏览器中有效，但在 Chrome 中无效，我也

html css google-chrome styling backdrop

回答 1 投票 0

将分隔元素与其周围的重复元素居中对齐

我需要创建一个像这样的部分：这是我已经尝试过的：我需要创建一个像这样的部分：这是我已经尝试过的： <div class="container"> <div v-for="(step, index) in steps" :key="index" class="step" > <div class="content"> <div class="icon"> // ICON CONTENT </div> <h3 class="title"> // TITLE CONTENT </h3> <p class="description"> // DESCRIPTION CONTENT </p> </div> <div v-if="index + 1 < steps.length" class="step-process__divider" /> </div> </div> 和CSS： .container { display: flex; justify-content: space-between; } .content { display: flex; flex-direction: column; align-items: center; text-align: center; } .step { display: flex; flex-direction: row; align-items: center; } .divider { background-color: #d9d9d9; border-radius: .2rem; height: 2px; width: 3rem; margin-top: 1.2rem; transform: translateY(-50%); margin: { left: $spacing--22; right: $spacing--22; } } ... 问题是分隔线看起来并不总是位于两个步骤元素之间的中心。有没有更好的方法来实现这个目标？我希望您使用 CSS-pseudo 元素和 CSS-selectors，具体来说，:not、first-child、last-child、before 和 after。您可以使用 :not 选择器获取不是第一个或最后一个的子元素，即它们之间的任何内容，然后在组件之前和之后添加行。请参阅此工作示例： .container { display: flex; justify-content: space-between; } .content { display: flex; align-items: center; text-align: center; } .step { display: flex; flex-direction: row; align-items: center; } .divider { background-color: #d9d9d9; border-radius: .2rem; height: 2px; width: 3rem; margin-top: 1.2rem; transform: translateY(-50%); margin: { left: $spacing--22; right: $spacing--22; } } .custom-class:not(:first-child):not(:last-child) { display: flex; align-items: center; justify-content: center; } .custom-class:not(:first-child):not(:last-child)::before { content: '—'; } .custom-class:not(:first-child):not(:last-child)::after { content: '—'; } <div class="container"> <div v-for="(step, index) in steps" :key="index" class="step"> <div class="content"> <div class="custom-class icon"> ICON CONTENT </div> <h3 class="custom-class title"> TITLE CONTENT </h3> <p class="custom-class description"> DESCRIPTION CONTENT </p> </div> <div v-if="index + 1 < steps.length" class="step-process__divider" /> </div> </div>

html css flexbox css-grid styling

回答 1 投票 0

MaterialUI TextField：更改背景颜色无法按预期工作

我正在尝试在我正在开发的应用程序中设置 TextField 组件的背景颜色，但是似乎当我添加 style={{background: "rgb(232, 241, 250)"}} 到该组件...

css reactjs material-ui styling css-in-js

回答 2 投票 0

动态更改 classList 时未应用样式

好吧，我使用 React 构建一个 Web 应用程序，我有一个名为 slice 的组件，其中包含两个项目组件，我想根据悬停事件更改它们的宽度。我知道

css reactjs react-hooks event-handling styling

回答 1 投票 0

我正在尝试使用 Material Ui 添加两个应用栏组件，我如何摆脱分隔两个应用栏的线

我正在尝试在 Material-UI 中添加两个 AppBar 组件，一个在另一个之上。但是，我遇到一个问题，即第一个 AppBar 的末尾、第二个 AppBar 的顶部出现一行。这是一个