styling 相关问题

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

我尝试使用 ngx-material-timepicker ，如下面的代码，但我无法更改任何 CSS 类我正在关注此链接 https://www.npmjs.com/package/ngx-material-timepicker 这是我的代码我尝试使用 ngx-material-timepicker ，如下面的代码，但我无法更改任何 CSS 类我正在关注此链接https://www.npmjs.com/package/ngx-material-timepicker 这是我的代码 <div class="clock"> <input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly /> <ngx-material-timepicker [appendToInput]="true" [disableAnimation]="true" [theme]="oktTheme" (timeSet)="onTimeset($event)" #fullTime ></ngx-material-timepicker> </div> 这是ts代码 oktTheme = { container: { bodyBackgroundColor: "#424242", buttonColor: "#fff" }, dial: { dialBackgroundColor: "#555" }, clockFace: { clockFaceBackgroundColor: "#555", clockHandColor: "#01806b", clockFaceTimeInactiveColor: "#fff" } }; 通过将自定义类添加到指令并使用内部指令类将其设置在 style.scss 中来解决此问题 html <div class="clock"> <input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly /> <ngx-material-timepicker [appendToInput]="true" [disableAnimation]="true" [theme]="oktTheme" [timepickerClass]="'custome-class'" (timeSet)="onTimeset($event)" #fullTime ></ngx-material-timepicker> </div> style.scss .custome-class { direction: ltr; .timepicker__header { padding: 0px 30px !important; border-top-right-radius: 12px; border-top-left-radius: 12px; } .timepicker-dial__control { font-size: 20px !important; } .timepicker-dial { border-bottom: 1px solid rgba(0, 0, 0, 0.12); display: flex; justify-content: center; height: 44px; } } 将其放入您的 SCSS 文件中（在 app.component.scss 或您的特定组件中） ::ng-deep ngx-material-timepicker-content{ --body-background-color: #fff; --primary-font-family: 'Roboto',sans-serif; --button-color: #c6ff00 !important; --dial-active-color: #fff; --dial-inactive-color: rgba(255, 255, 255, .5); --dial-background-color: #c6ff00 !important; --dial-editable-active-color: #c6ff00 !important; --dial-editable-background-color: #fff; --clock-face-time-active-color: #fff; --clock-face-time-inactive-color: #6c6c6c; --clock-face-inner-time-inactive-color: #929292; --clock-face-time-disabled-color: #c5c5c5; --clock-face-background-color: #f0f0f0; --clock-hand-color: #c6ff00 !important; } 更改标题、按钮和时钟指针的颜色。 .ngx-picker-custom { direction: ltr; .timepicker__header { background-color: var(--color-cyan)!important; } .timepicker-button{ color: var(--color-cyan)!important; } .clock-face__clock-hand, .clock-face__number > span.active, .clock-face__clock-hand{ background-color: var(--color-cyan)!important; } .clock-face__clock-hand_minute:before { border-color: var(--color-cyan)!important; } }

angular angular-material styling timepicker

回答 3 投票 0

使 <a> 标签位于 div 右侧

我正在尝试制作一个浮岛导航栏，我希望所有链接都转到我的容器的右侧，但它不起作用。我尝试将它放入我的父容器中，但它只是弄乱了其他容器......

html css styling

回答 2 投票 0

在 MUI v5 中，如何在开发工具 DOM 中调试/查找特定元素/样式/类？

在 MUI v4 中，检查 DOM 并隔离该文件中的确切组件文件和样式块非常容易： MUI v4 查找特定元素/样式类的方法然而，在 MUI v5 中，这是......

css reactjs material-ui styling

回答 1 投票 0

如何在 PyCharm 中为函数参数设置制表符缩进？ [重复]

代替函数参数的双缩进 def foo( 姓名）： print('你好' + 名字) 我想使用单缩进： def foo( 姓名）： print('你好' + 名字) => 怎么...

python pycharm styling

回答 1 投票 0

视口宽度如何与CSS中的字体大小一起使用？

有人可以帮我理解视口宽度单位如何与字体大小配合使用吗？在文档中它说 1vw = 视口宽度的 1%（所以我猜是窗口宽度的 1%？）但是如果我给出...

html css styling viewport-units

回答 2 投票 0

即使内容试图溢出，如何将 div 限制为屏幕大小

我正在努力将 div 限制在屏幕底部。我的身体内部有这样的结构。导航栏坚持... 我正在努力将 div 限制在屏幕底部。我的身体内部有这样的结构。 <body class="flex"> <div class="h-screen w-48">navbar sticking to the left covering entire height with a fixed width.</div> <div class="h-screen flex-1 flex flex-col"> <div class="w-full h-20">header containing heading of the page</div> <div class="w-full flex-1"> //covering remaining height(3rd div) <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> ...many more items </ul> </div> </div> </body> 我希望第三个 div 覆盖笔记本电脑和台式机屏幕的剩余高度，如果有想要离开屏幕的列表，则第三个 div 上会出现一个滚动条。如果我尝试给出一个最大高度，那么它对于某些屏幕来说看起来很好，但对于其他屏幕来说却很难看（假设我给出了 680px 的最大高度，那么它会覆盖某些尺寸的屏幕，而对于其他尺寸，它会超出屏幕下方或出现短于屏幕底部）。我希望 3 个 div 的结构在页面上保持静态，无论屏幕大小如何，如果第 3 个 div 中的内容想要溢出，则其上会出现一个滚动条。我想你想制作一个导航栏。在 html 文件中添加 bootstrap css 时使用此代码。

html css tailwind-css overflow styling

回答 1 投票 0

CSS 行为与 Nuxt 3 不一致

我的 CSS 遇到了一个非常奇怪的行为。当我最初加载页面（或刷新时）时，不会应用 CSS。但是，我注意到如果我对样式标签进行更改，例如......

css vue.js styling nuxtjs3 saas

回答 1 投票 0

使用 OpenStreetMap 的传单地图中的 SCSS 样式问题

使用 OpenStreetMap 的 Leaflet 地图中的 SCSS 样式问题我正在使用 OpenStreetMap 和 Leaflet 在地图上绘制。我有一个函数 updateMarkers() 可以清除现有标记并创建新标记...

css angular leaflet openstreetmap styling

回答 1 投票 0

从 JavaFX AreaChart 中删除所有边框和轴线

我正在尝试使用 JavaFX 制作完全无样式的 AreaChart。我只想要实际的图表线。到目前为止，我认为我已经接受了出现的这条烦人的白线

java javafx charts styling

回答 1 投票 0

将元素添加到提取的样式表中的每个CSS规则（以字符串形式）

我想更改从 HTML 电子邮件正文中提取的字符串中的每个 css 规则。该字符串包含元素内的 css，这会影响我的网站样式。我想添加一个元素 (div c...

php css html-email imap styling

回答 1 投票 0

laravel livewire 打破了样式（@push script）

我在已经制作的 Laravel 项目之上应用了 Livewire。它只是应用wire:model来选择，如下所示。我在已经制作的 Laravel 项目之上应用了 Livewire。它只是应用电线：模型来选择，如下所示。 <select wire:model="wired" id="#selector-01" > <option>1</option> <option>1</option> </select> 并在for循环的if语句中使用wire变量（wired）。 <select id="#selector-02"> @foreach($numbers in $number) @if($some_id == $wired) <option> some_id </option> @endif @endforeach </select> 我仅将其用作组件。所有数据都在原来的laravel控制器中控制。 livewire 组件由 @livewire('component-name') 调用一切都正常，正如我所想的那样，除了样式之外。我认为这与使用 SlimSelect 有关在 livewire component-name.blade.php 的末尾，我有 SlimSelect 样式，如下所示。 @push('js') <script> new SlimSelect({ select: '#selector-01' }) new SlimSelect({ select: '#selector-02' }) </script> @endpush 我尝试将代码移至 original.blade.php 带有 @push 和 @stack app.blade.php 没有@push 但造型仍然有问题。我认为解决方案可能是在实时线控制器的update()中添加几行以重新注入样式脚本。我的方向正确吗？请帮忙。添加以下代码解决了问题。 <script> document.addEventListener('livewire:update', function () { // Your JS here. new SlimSelect({ select: '#selector-01' }) new SlimSelect({ select: '#selector-01' }) }) </script> 您还可以使用livewire:onload代替@stack和@push来加载样式onload 参考 Livewire 文档添加连线：忽略选择元素或其父元素 <select id="#selector-02" wire:ignore> @foreach($numbers in $number) @if($some_id == $wired) <option> some_id </option> @endif @endforeach </select>

laravel styling slimselect

回答 0 投票 0

如何在 Google 地图中设置可编辑圆圈控件的样式

有谁知道一种简单的方法来为 Google 地图中的可编辑圆圈设置用户控件（半径边界上的白点）样式？我在 API 文档中找不到任何执行此操作的方法...

javascript google-maps styling

回答 3 投票 0

有没有办法在scss中创建全局变量？

我想在 Home.scss 文件中创建一组变量，可以在其他 scss 文件中重用这些变量，而无需在其他 scss 文件中重新键入或复制并粘贴这些变量。有什么办法让我...

reactjs sass styling

回答 1 投票 0

制表符 - 格式化打印和 PDF 输出

我是 Tabulator 的一个相对较新的用户，所以如果我问任何可能应该是显而易见的问题，请原谅我。我有一个制表器报告，可以将其打印并创建为 PDF，但是

pdf printing styling tabulator

回答 2 投票 0

从外部设置 Shadow DOM 样式

我正在寻找一种从外部设置 Shadow DOM 样式的方法。例如，我想将所有“span.special”元素中的所有文本的颜色设置为红色。包括来自 sha 的“span.special”元素...

javascript css html styling shadow-dom

回答 5 投票 0

shadcn/ui - 无法加载 URL

我正在尝试将 shadcn 用于某些样式组件，但在导入其中一个组件时遇到问题。这是我收到的错误无法加载 url /src/components/ui/input （已解析 id：/src/

reactjs components tailwind-css styling

回答 2 投票 0

如何向react-pdf文档添加样式

我尝试使用此代码但无法调整宽度我尝试使用此代码，但无法调整宽度 <Document style={{width:"100px"}} file="123.pdf" onLoadSuccess={onDocumentLoadSuccess} > <Page pageNumber={pageNumber} /> </Document> style={{}} 不起作用。 React-pdf 没有宽度属性。但有一个 height 属性。我使用了它，并根据比例调整了宽度。这对我有用。根据文档https://react-pdf.org/components 不支持样式，需要给page组件设置样式您需要删除 (px) 保留为数字或字符串，没有 px => width: "100" 或 width: 100

reactjs styling react-pdf

回答 3 投票 0

CSS Div 淡入淡出滚动样式

我似乎不知道如何设计如下图所示的可滚动 div 的样式。我发现的教程和示例都将 div 淡出为背景颜色，但我找不到这样的，

html css scroll styling

回答 1 投票 0

移动视图媒体查询被我的平板电脑媒体查询覆盖。为什么？

当我使用移动视图时，平板电脑视图媒体查询始终会覆盖我的移动媒体查询。为什么会发生这种情况？我就是这样添加的。 /* X-Small 设备（竖屏手机，小于 576px） */ @我...

css responsive-design media-queries styling

回答 1 投票 0

具有响应式文本的标题每换行应有一个背景

我正在寻找一位 CSS 大师，他可能会帮助我解决以下问题：我正在开发一个响应式卡片容器（一行中显示的卡片数量取决于浏览器屏幕大小）...