前端开发者如何在项目里控制修改组件的样式

embedded/2024/9/21 11:26:50/

1为了让自己快速下班,修改样式应该是占据大部分时间,在很多组件库的项目里,都会提到主题设置。
比如element的scss配置变量,通常有人喜欢直接引入css样式来快速完成任务,然后在全局覆盖这些选择器对应的样式,完成任务
2其实可以优化采用scss来引入样式文件,帮助我们完成对组件内部变量样式的控制,因为每一个组件内部都有很多公用的变量对应。
3如何知道对应的组件里面有哪些变量,我们可以在依赖包里寻找
在这里插入图片描述
4可以配置如下设置来完成样式 在不同的工程里 ~ 符合要配置对应的别民就可以指向node modules文件夹就ok
在这里插入图片描述
5如同上面的变量就是从内部组件依赖里寻找到的,然后找到设计需要你修改的部分以及主题。然后完成公用的快速修改。
6如果涉及到了主题的切换,借助这个变量结合css变量外加主题对应的选择器类就更容易实现对内部样式的控制。
7如果你是项目的react 也是差不多的,比如antd的组件库有提供theme主题函数以及组件的配置说明,如果要实现组件的样式功能,就可以通过在antd导出theme然后点击进入查看全局样式的ts属性说明,里面有几十种组件的属性配置说明,以及全局的内置变量说明。
8如果你还在项目里使用了tailwind css 那应该就更方便了,虽然有点重,配置对应的自定义class或者覆盖样式主题来完成页面的控制。


http://www.ppmy.cn/embedded/25881.html

相关文章

Nacos和Eureka有什么区别!!!

一致性模型: Eureka:采用的是 AP(Availability, Partition Tolerance)模型,即在面临网络分区或部分节点故障时优先保证系统的可用性,牺牲一定的数据一致性。Eureka 通过自我保护机制,允许在节点…

【MySQL】A01、性能优化-参数监控分析

1、参数监控 1.1、MySQL command 查看 mysql>SHOW STATUS; (服务器状态变量,运行服务器的统计和状态指标) mysql> SHOW VARIABLES;(服务器系统变量,实际上使用的变量的值) mysql> SHOW STATUS …

Microsoft Edge 使用心得与深度探索

Microsoft Edge 是微软推出的一款基于 Chromium 开源项目的网页浏览器,它继承了 Chrome 的许多特性,并添加了一些独特的功能,比如垂直标签页、集锦、沉浸式阅读器等。 Microsoft Edge 使用心得与深度探索 一、Microsoft Edge 简介 Microsof…

容器的通俗讲解

想象一下,你正在厨房准备做一顿美味的大餐。厨房里有各种各样的厨具和食材,但是有时候,为了做一道特别的菜,你需要把一些特定的材料和工具单独放在一起,不让它们和其他菜肴的用品混在一起,这样既能保证这道…

【动态规划】Leetcode 32. 最长有效括号【困难】

最长有效括号 给你一个只包含 ‘(’ 和 ‘)’ 的字符串,找出最长有效(格式正确且连续)括号子串的长度。 示例 2: 输入:s “)()())” 输出:4 解释:最长有效括号子串是 “()()” 解题思路 1…

H3C无线控制器查看AP版本是否自动升级

全部网络--无线配置--AP管理--AP全局配置 如果开启了AP版本升级,那么当升级AC无线控制器的时候 , AP也会同时进行升级 命令行: [H3C]wlan auto-ap enable 自动注册 [H3C]wlan auto-persistent enable 自动固化 [Sysname] …

vue 实现 下拉触底事件

注册滚动事件 window.addEventListener(scroll, this.onScroll, true) 事件触发 onScroll () {let scrollTop document.documentElement.scrollTop || document.body.scrollToplet clientHeight document.documentElement.clientHeightlet scrollHeight document.document…

HTML:认识HTML及基本语法

目录 1. HTML介绍 2. 关于软件选择和安装 3. HTML的基本语法 1. HTML介绍 HyperText Markup Language 简称HTML,意为:超文本标记语言 超文本:是指页面内可以包含的图片,链接,声音,视频等内容 标记&am…