styles 相关问题

不要使用此标签。此标记目前没有单一的,明确定义的含义。它通常用于代替[css]或与[css]结合使用。它还用于有关用户界面外观和源代码格式问题的问题。

如何在 Angular17 中更改 CSS 类的动态值

我尝试在类中更改动态值,在 React 中这非常容易,但我是 Angular 的新手,我不知道该怎么做。大家可以帮帮我吗T_T 在此处输入图像描述Html 文件包含值(c...

回答 1 投票 0

WPF - 根据 IsEnabled 属性更改按钮背景的样式

我为我的按钮做了这个样式,它加载得很好 但我现在尝试根据 IsEnabled 属性设置不同的背景,但这似乎不起作用 我为我的按钮制作了这种样式,并且加载得很好 但我现在尝试根据 IsEnabled 属性设置不同的背景,但这似乎不起作用 <SolidColorBrush x:Key="Color" Color="#FFADD2CC"/> <SolidColorBrush x:Key="Color_Disabled" Color="#FF8D9B98"/> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Height" Value="32"/> <Setter Property="Padding" Value="8,4,8,4"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Background="{TemplateBinding Background}"> <Grid> <Rectangle x:Name="BackgroundRect" Fill="{StaticResource Color}" RadiusX="2" RadiusY="2"/> <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </Border> <ControlTemplate.Triggers> <!-- DataTrigger to change the background color based on IsEnabled property --> <DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="True"> <Setter TargetName="BackgroundRect" Property="Fill" Value="{StaticResource Color}"/> </DataTrigger> <DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="False"> <Setter TargetName="BackgroundRect" Property="Fill" Value="{StaticResource Color_Disabled}"/> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> 我在我的主模板中使用它,就像这样 <Button Grid.Column="1" Content="Button Text" ToolTip="Some tooltip" Click="OnClick" Style="{StaticResource ButtonStyle}" Margin="0,0,4,0" IsEnabled="false"/> 我希望按钮根据 IsEnabled 值具有不同的颜色 感谢您的帮助 您只需要在 Trigger 属性上设置一个普通的 IsEnabled 即可设置按钮的 Background。 ControlTemplate 中的 Grid 和 Rectangle 是多余的。 <SolidColorBrush x:Key="BackgroundEnabled" Color="#FFADD2CC"/> <SolidColorBrush x:Key="BackgroundDisabled" Color="#FF8D9B98"/> <Style x:Key="ButtonStyle" TargetType="Button"> ... <Setter Property="Background" Value="{StaticResource BackgroundEnabled}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Background="{TemplateBinding Background}"> <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" Value="{StaticResource BackgroundDisabled}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

回答 1 投票 0

浏览器中未加载样式和CSS

我已经更新了 React 项目上的软件包版本,并且样式现在未加载。 在代码中我使用这样的样式: 从“../WrappersCommon.scss”导入样式; ... 我已经更新了 React 项目上的软件包版本,并且样式现在未加载。 在代码中我使用这样的样式: import styles from "../WrappersCommon.scss"; ... <div className={styles["main-layout"]}> 在 webpack 配置中我有 test: /.(scss)$/, use: [ { loader: "css-loader", options: { modules: { localIdentName: "[path][name]__[local]--[hash:base64:5]", }, }, }, { loader: "postcss-loader", options: { postcssOptions: { plugins: [postcssPresetEnv()], }, }, }, "sass-loader", ], 终端中没有错误,我在应用程序中没有看到任何样式,它们甚至没有加载到浏览器中: 请帮忙,样式有什么问题吗? 你可以尝试使用这样的样式 <div className={styles.main_layout}> 而不是 <div className={styles["main-layout"]}> 请注意,我还将类名中的“-”替换为“_”。也在您的 scss 文件中更改它,然后再次检查。我希望它能解决问题,如果不能,我可以寻找其他解决方案。

回答 1 投票 0

是否可以使用CSS仅用这张图片制作动画效果?

我想使用“皮卡丘”运行的图像,而不必创建gif(因为它更重),并且我想使用他在css中运行的效果。我该如何使用这个鳕鱼...

回答 1 投票 0

如何在 React Native 中设置默认深色文本颜色而不修改 AppTheme 或创建文本包装器

在我的 React Native 项目中,对于 Android,我想为所有文本组件设置默认的深色/浅色文本颜色。以下是限制条件: 我不想修改 android/app/src/main/res/sty...

回答 1 投票 0

我想知道Elm中元素的html属性

我想知道Elm中某个元素的html属性,例如她的坐标。我正在尝试使用 Json.Decode。 我是 Elm 的新手,这是出于学习目的。 这是一个简单的代码,...

回答 2 投票 0

定位 style.xaml 资源时出现问题

我在查找 style.xaml 资源时遇到问题,该资源包含按钮、文本框和其他元素的样式。该资源采用字典 XAML 的形式,位于...

回答 1 投票 0

Material-UI v5 菜单组件样式未应用

我在 Material-UI v5 中设置菜单组件样式时遇到问题。 我有这个用户界面: 我在 Material-UI v5 中设置菜单组件样式时遇到问题。 我有这个用户界面: <Menu defaultValue={undefined} id="simple-menu" open={openMenu} onClose={onCloseHandler} anchorEl={anchorEl} MenuListProps={{ onMouseLeave: onCloseHandler }} elevation={0} sx={{ color: "white", backgroundColor: "blue" }} > 当我使用此代码时,所有 UI 都会变成蓝色: 之后我尝试将全局样式覆盖应用到菜单的纸张上,但没有任何反应。风格没有改变: components: { MuiMenu: { styleOverrides: { paper: { backgroundColor: arcBlue, color: arcBlue, borderRadius: "0px", }, }, } } 请大家帮忙 直接在 sx 组件上传递 Menu 会将样式应用于组件的根(这就是导致样式修改应用于覆盖毯的原因)。 在您的情况下,由于您尝试仅设置菜单的 MUI 列表部分的样式,因此您希望使用 sx 属性将 MenuListProps 属性直接传递到 underlying 列表组件。例如: <Menu id="basic-menu" anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{ sx: { backgroundColor: "blue" } }} > 产生: 工作 CodeSandbox:https://codesandbox.io/s/twilight-glitter-cj83rc?file=/demo.tsx:758-951 我正在 Udemy 上做同样的课程,并且我找到了另一种方法来使用父菜单组件 sx-prop 来定位您正在设计样式的嵌套组件,而不是像第一个答案中那样使用 MenuListProp 属性的嵌套 sx-prop 。 在弄清楚这个之前,我确实使用了第一个答案: 文档中的示例可以在标题为“覆盖嵌套组件样式”的部分中找到 链接:https://mui.com/material-ui/customization/how-to-customize/#the-sx-prop 这是我的代码中的样子: 这是样式化的纸张在浏览器中的样子:

回答 2 投票 0

使用hostinger在wordpress上升级CSS时出现问题

基本上我正在做我的第一个互联网作品集。我正在使用 Hostinger 和 wordpress.com。 我想创建自己的主题,所以我在 wpcontet/themes 中创建一个名为 mytheme 的文件夹并放入我的猪圈...

回答 1 投票 0

如何在 Flutter 移动应用程序的 style.xml 中存储的样式之间动态更改

这是我的 styles.xml 文件: <p>这是我的 styles.xml 文件:</p> <pre><code>&lt;resources&gt; &lt;!-- Theme applied to the Android Window while the process is starting when the OS&#39;s Dark Mode setting is off --&gt; &lt;style name=&#34;LaunchTheme&#34; parent=&#34;@android:style/Theme.Light.NoTitleBar&#34;&gt; &lt;!-- Show a splash screen on the activity. Automatically removed when the Flutter engine draws its first frame --&gt; &lt;item name=&#34;android:windowBackground&#34;&gt;@drawable/launch_background&lt;/item&gt; &lt;item name=&#34;android:forceDarkAllowed&#34;&gt;false&lt;/item&gt; &lt;item name=&#34;android:windowFullscreen&#34;&gt;false&lt;/item&gt; &lt;item name=&#34;android:windowDrawsSystemBarBackgrounds&#34;&gt;false&lt;/item&gt; &lt;item name=&#34;android:windowLayoutInDisplayCutoutMode&#34;&gt;shortEdges&lt;/item&gt; &lt;/style&gt; &lt;!-- Theme applied to the Android Window as soon as the process has started. This theme determines the color of the Android Window while your Flutter UI initializes, as well as behind your Flutter UI while its running. This Theme is only used starting with V2 of Flutter&#39;s Android embedding. --&gt; &lt;style name=&#34;NormalTheme&#34; parent=&#34;Theme.MaterialComponents&#34;&gt; &lt;item name=&#34;android:windowBackground&#34;&gt;?android:colorBackground&lt;/item&gt; &lt;/style&gt; &lt;/resources&gt; </code></pre> <p>如何在运行应用程序时在它们之间进行更改? “启动主题”仅用于初始化应用程序,“正常主题”用于其余部分。</p> <p>我发现了一个叫做toggleTheme()的东西,但它对我不起作用</p> </question> <answer tick="false" vote="0"> <p>您想在浅色模式和深色模式等主题之间切换吗? 如果是,请这样做:</p> <p>主题配置.dart:</p> <pre><code>import &#39;package:flutter/material.dart&#39;; import &#39;package:flutter_clock/utils/my_colors.dart&#39;; ThemeData lightTheme = ThemeData.light().copyWith( tabBarTheme: TabBarTheme( indicator: const UnderlineTabIndicator( borderSide: BorderSide(color: MyColors.lightRed, width: 4.0), ), labelColor: Colors.black, unselectedLabelColor: Colors.grey.shade400, unselectedLabelStyle: TextStyle(color: Colors.grey.shade400, fontSize: 10), dividerColor: Colors.transparent, indicatorSize: TabBarIndicatorSize.label, labelStyle: const TextStyle( fontSize: 12, letterSpacing: 1.3, fontWeight: FontWeight.w500), ), primaryColor: const Color(0xFFfafafa), scaffoldBackgroundColor: MyColors.white, floatingActionButtonTheme: const FloatingActionButtonThemeData( backgroundColor: Color(0xFF2b2119), ), ); ThemeData darkTheme = ThemeData.dark().copyWith( tabBarTheme: TabBarTheme( indicator: const UnderlineTabIndicator( borderSide: BorderSide(color: MyColors.lightRed, width: 4.0), ), labelColor: Colors.white, unselectedLabelColor: Colors.grey.shade800, unselectedLabelStyle: TextStyle(color: Colors.grey.shade800, fontSize: 10), dividerColor: Colors.transparent, indicatorSize: TabBarIndicatorSize.label, labelStyle: const TextStyle( fontSize: 12, letterSpacing: 1.3, fontWeight: FontWeight.w500), ), scaffoldBackgroundColor: MyColors.backgroundColor, iconTheme: const IconThemeData(color: Colors.black), primaryColor: Colors.amber); </code></pre> <p>ThemeData darkTheme = ThemeData.dark().copyWith( tabBarTheme: TabBarTheme( 指示器:const UnderlineTabIndicator( borderSide:BorderSide(颜色:MyColors.lightRed,宽度:4.0), ), labelColor:颜色.白色, 未选择的LabelColor:Colors.grey.shade800, 未选择的标签样式: TextStyle(颜色: Colors.grey.shade800, 字体大小: 10), 分隔线颜色:Colors.transparent, IndicatorSize:TabBarIndicatorSize.label, labelStyle: const TextStyle( 字体大小:12,字母间距:1.3,字体粗细:FontWeight.w500), ), 脚手架背景颜色:MyColors.backgroundColor, iconTheme: const IconThemeData(颜色: Colors.black), PrimaryColor:颜色.琥珀色);</p> <p>ThemeData 万圣节主题 = ThemeData.dark().copyWith( tabBarTheme: TabBarTheme( 指示器:const UnderlineTabIndicator( borderSide:BorderSide(颜色:Colors.purple,宽度:4.0), ), labelColor:颜色.白色, 未选择的LabelColor:Colors.grey.shade800, 未选择的标签样式: TextStyle(颜色: Colors.grey.shade800, 字体大小: 10), 分隔线颜色:Colors.transparent, IndicatorSize:TabBarIndicatorSize.label, labelStyle: const TextStyle( 字体大小:12,字母间距:1.3,字体粗细:FontWeight.w500), ), 脚手架背景颜色:MyColors.backgroundColor, iconTheme: const IconThemeData(颜色: Colors.black), PrimaryColor:颜色.琥珀色);</p> <p>然后,在主文件中添加以下内容:</p> <p>main.dart:</p> <pre><code>import &#39;theme_config.dart&#39;; class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: &#39;Flutter Demo&#39;, theme: darkTheme. home: const MyHomePage(title: &#39;Flutter Demo Home Page&#39;), ); } } </code></pre> <p>或者</p> <p>如果您只想要浅色或深色主题,请调用此方法:</p> <pre><code>class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: &#39;Flutter Demo&#39;, theme: ThemeData.dark(), home: const MyHomePage(title: &#39;Flutter Demo Home Page&#39;), ); } } </code></pre> <p>注意: 我有时用<pre><code>MyColors.</code></pre>,你应该用<pre><code>Colors.</code></pre></p> </answer> </body></html>

回答 0 投票 0

更改 Press 事件 React Native 的样式

我在使用onPress事件更改样式时遇到问题,最初我的宽度= 75和高度(宽度和高度的默认值),但是当我使用onPress时我想触发该方法(方法...

回答 4 投票 0

Wordpress 上的按钮对齐

我有一个 WordPress WooCommerce 网站,即使上面的文本有所不同,我也需要将按钮对齐在相同的高度上 我的网站的链接 https://24.sahaap.com/ 我尝试通过CSS代码修复它但是...

回答 1 投票 0

工作区右键菜单的一级和二级菜单的类名是什么?

我想自定义vscode的样式,使用apc扩展。现在我想知道右键菜单的类名。 原因:我知道可以通过workbench中的menu.background来设置。

回答 1 投票 0

无法设置材质-ui 日期选择器确定/取消按钮的样式

我按照此链接中的步骤通过更改主题来更改背景颜色material-ui --> Date Picker 对话框。更改主题改变了背景颜色,但没有改变颜色...

回答 2 投票 0

如何更改放射状条的样式

我想改善我的放射状图形的视觉效果。我使用假数据来模拟来自12个或更多系列/标签后端的数据到达,我的代码如下: 常量图表...

回答 1 投票 0

如何覆盖主题中的 mui 嵌套组件样式?

我创建了一个带有可编辑单元格的 mui DataGrid。在编辑模式下,输入的填充默认为 0 16px,如 mui 生成的样式所示: .css-jqsvr8-MuiInputBase-root-MuiDataGrid-editInp...

回答 2 投票 0

为什么我的 css 没有链接到我的 html 文件?

两个主题化图标的样式都与索引位于同一文件夹中 但是当打开源文件时,themify-icons 不会显示 两个themify图标样式都与index位于同一文件夹中,但是...

回答 1 投票 0

Google 文档:从点到像素的转换是什么?

在 Google Apps 脚本文档中,它多次模糊地引用点,例如此处引用页面的尺寸。快速谷歌搜索发现这种转换取决于...

回答 2 投票 0

我想知道如何正确格式化这些框

目前的情况是这样的: 我想把它做成这样: 我已经尝试更改边框大小、填充和显示类型(当前是内联块),并更改宽度/

回答 1 投票 0

我想知道如何正确格式化这些框

目前就是这样 我想把它做成这样 我已经尝试更改边框大小、填充、显示类型(当前是内联块)并更改宽度/高度...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.