如何在样式化组件上保持从父级到子级的字体大小？
在样式化组件上保持从父级到子级的字体大小，可以通过使用CSS的继承和单位计算来实现。
- 继承：在父级组件中设置字体大小，子级组件可以通过继承父级组件的样式来保持相同的字体大小。可以使用CSS的
inherit关键字将字体大小属性设置为继承，例如：
.parent {
font-size: 16px;
}
.child {
font-size: inherit;
}在上述示例中，子级组件的字体大小将继承父级组件的字体大小，保持一致。
- 单位计算：另一种方法是使用相对单位来计算字体大小，以确保在不同层级的组件中保持一致。常用的相对单位有
em和rem。
em：相对于父元素的字体大小进行计算。例如，如果父级组件的字体大小为16px，子级组件可以使用0.8em来表示相对于父级字体大小的80%。
.parent {
font-size: 16px;
}
.child {
font-size: 0.8em;
}rem：相对于根元素（通常是<html>标签）的字体大小进行计算。这样可以确保在整个页面中字体大小的一致性。
:root {
font-size: 16px;
}
.child {
font-size: 0.8rem;
}通过使用相对单位，无论组件嵌套多深，字体大小都会按照相对比例进行计算，保持一致。
以上是保持从父级到子级的字体大小的两种常用方法。在实际应用中，可以根据具体情况选择合适的方法。对于样式化组件，可以使用CSS预处理器（如Sass、Less）或CSS-in-JS工具（如Styled Components、Emotion）来更方便地管理样式，并实现字体大小的继承和计算。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云CSS：https://cloud.tencent.com/product/css
相关·内容
2回答
如何在样式化组件上保持从父级到子级的字体大小？
css、reactjs
嗨，我刚刚开始使用样式化组件。 但我发现了一点奇怪的东西。 正如你所看到的，我不知道为什么所有的孩子字体大小仍然是15px。 那么如何将字体大小设置为子元素的父元素呢？ 谢谢。
浏览 25提问于2020-03-31得票数 1
1回答
如何将组件从父组件传递到chlid，以及如何将子组件字段传递给组件？
javascript、reactjs
如何将组件从父级传递到子级，以及子级将道具传递给组件？如何在子组件中传入onCloseModal？我的createComponent是动态的，createProduct，createCategory，这就是为什么我要这样做。父组件 re
浏览 2提问于2020-04-20得票数 0
3回答
react将函数传递给子组件是个好主意吗？
javascript、reactjs、react-native
我有一个父组件和子组件。我来自vue.js世界，在那里我真的很喜欢$emit的整个概念。updateInput'
浏览 38提问于2021-05-17得票数 0
回答已采纳
2回答
如何在函数React中将状态从父级传递到子级？
reactjs、react-native
我已经尝试了很多方法，我可以很好地在组件之间传递函数，但是当我尝试将状态从父组件传递给子组件时，我得到了一个错误，说无法读取未定义的内容 父级基本上是一个回收器列表视图，子级是HorizontalScrollrenderAheadOffset={0} )}
浏览 21提问于2019-12-19得票数 0
2回答
如何在angular2+中将动态数据从父级传递到子级
javascript、angular、data-binding、angular6
如我们所知，在使用@Input装饰器进行的角父级到子级通信中，如何将动态数据从父级传递到child.for中，在父级中定义了“name”属性，并且它的值会动态变化，并且更新了我们将在子组件中使用的“name”值，因此如何在不使用服务的情况下实现它。
浏览 1提问于2020-06-20得票数 0
回答已采纳
1回答
angular5动态组件父-chld通信
angular、dynamic、angular5、angular-directive
我正在实现中描述的方法。
父模板中的<child-comp (xevent)="aParentMetho
浏览 0提问于2018-04-05得票数 1
回答已采纳
2回答
Angular 2-子零部件不从主零部件继承样式
html、css、angular、typescript、angular2-template
我有一个父组件，它使用子组件。我在父Css文件中编写了必要的样式，当我们将鼠标悬停在div上时，样式将相应地更改。子组件没有访问父组件的样式类。有一个解决方案可以做到这一点，使用encapsulation: ViewEncapsulation.None，但是当我使用它时，我的整个样式都被干扰了。子</em
浏览 1提问于2016-08-10得票数 0
1回答
从父级到子级之间传递多个样式的本机响应，哪种方法更常用？有什么关系？
react-native、parent-child、prop
响应本机将多个样式从父级传递到子级，组件，哪种方法更常用？有什么关系？Rest参数类型，<Text style={...styles.title，...props.style}>{props.children}使用数组，<Text style
浏览 5提问于2022-01-17得票数 0
回答已采纳
1回答
我有drupal 8的多站点架构，我在我的基本主题中使用模式实验室，但是现在我想从父主题到子主题访问一些组件。使用模式实验室创建子主题的最佳方法是什么？提前谢谢。
浏览 0提问于2020-05-01得票数 0
回答已采纳
1回答
在角2中将布尔值从父部件传递给子组件。
angular
我试图在不涉及模板文件的情况下，将布尔值从父组件传递到子组件。通过使用模板文件，我知道普通的父级到子级的通信，但不知道如何在不使用模板类的情况下通信。这就是我试过的方法，但我不确定这是不是正确的方法。
浏览 0提问于2018-10-30得票数 1
回答已采纳
1回答
在react子组件中处理onSubmit
reactjs、forms
处理子组件上的onSubmit事件的最优雅和类似于react的方式是什么？现在的问题是，表单需要做更多的事情，显示被引用资源的字段，并在服务器上创建这些引用，类似于父组件。将其分离到</
浏览 2提问于2020-05-13得票数 0
1回答
VueJs -创建带有输入字段的子组件的正确方法是什么
vue.js、vuejs2、vue-component
我试图使用vuejs来显示子组件的实例列表。子组件具有用户将填写的输入字段。父组件将检索数据数组来填充子组件(如果存在的话)，但是由于它们是输入字段，子组件将对值进行更改(这会在控制台中生成错误，因为子组件不应该更改从父组件传递的值)。我可能只是懒惰，只需在父级完成一切(即在检索到</
浏览 4提问于2020-08-24得票数 2
回答已采纳
1回答
Vue -使用ref访问嵌套的childs
vue.js、nested、vue-component、ref
我在自己的内部使用了vue组件-数据可以有带子元素的数组，我使用这个数组在循环中呈现它们，并根据嵌套级别呈现下一层，下一层等等。现在我想从父级运行子方法，然后-如果语句是ok的，也调用它到子级，下一级等。$refs.myFirstLevelRefName
调用第一级的孩子。但是对于子节点呢？$refs从子级别发送到控制台，但它是空的</
浏览 3提问于2018-04-05得票数 23
回答已采纳
2回答
从python 3.x中的父类继承
python、python-3.x
在python3.x中从父类继承时，父类是否“清空”了它的默认值，你需要重新定义它们吗？
浏览 0提问于2013-06-24得票数 0
1回答
Hibernate @OneToMany: PSQLException: ERROR:列中的空值
java、hibernate、jpa、spring-data、one-to-many
我有两个dtos和相应的dao接口来扩展JpaRepository@Table(name = "parent")@AllArgsConstructor(ids应该由DB生成)由: java.sql.BatchUpdateException:批处理条目0插入子值(id、name、parent_i
浏览 4提问于2022-09-08得票数 0
2回答
如何在角6中用仿真封装改变子组件样式？
angular、css、angular6
如何在不更改封装视图的情况下从父级更新某些子组件css？app.component.css color:green; font-family: Lato;我可以在铬工具栏中看到它试图覆盖样式，但是子组件仍然显示颜色:红色。
浏览 1提问于2018-12-12得票数 0
回答已采纳
2回答
在React中从子功能组件更改父组件状态
reactjs
我已经创建了一个包含登录组件和注册组件的签名页面组件。我的问题是，如何将onClick函数从父组件传递给子组件，以便更改父组件(签名页面组件)的状态？我所期望的是，通过单击子组件中的按钮，可以切换父组件的活动状态，并且可以根据活动状态更改样式。我试图将一个h
浏览 2提问于2020-12-12得票数 0
2回答
ReactJs如何在组件之间传递数据
javascript、reactjs、react-native
我一直在学习如何在组件之间传递数据，并在缓慢地发展对如何传递数据的理解。在简化的基础上，似乎有4种情况：
从父级检索数据。这是第四个我还没找到任何指导的案子。你在一个孩子中，你想从父母那里得到一些数据，而这些数据不是作
浏览 0提问于2018-04-24得票数 1
1回答
在NuxtJS中如何将数据从父级传递到子级
vue.js、nuxt.js
我想知道如何在NuxtJs中将一些字符串或动态数据从父级传递到子级它是我的父组件： <div> components: {
浏览 10提问于2020-05-09得票数 0
回答已采纳
1回答
角6多重@输入()级
javascript、html、angular、typescript
我有一个包含多个子级组件的组件： | | |我试图通过@Input()将一个值从父母传递给每个孩子@Input() info: Info= {} as Info;[info]="info&quo
浏览 2提问于2018-10-25得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
