React，RN，组件上的内联样式真的很糟糕吗？
React和React Native（RN）是一种流行的前端开发框架，用于构建用户界面。在React中，组件上的内联样式是一种将CSS样式直接应用于组件的方法。然而，内联样式在某些情况下可能会带来一些问题。
首先，内联样式会导致样式与组件逻辑混杂在一起，使得代码难以维护和理解。当样式变得复杂时，内联样式可能会导致代码冗长和混乱。
其次，内联样式的优先级较低，很难覆盖全局样式。如果需要覆盖全局样式或应用特定样式，可能需要使用其他方法，如CSS模块化或CSS-in-JS。
此外，内联样式也可能影响性能。由于内联样式是在组件渲染时动态生成的，每次渲染都会重新计算样式，可能会导致性能下降。
然而，内联样式也有其优势和适用场景。它可以使组件更加独立和可移植，减少对外部样式的依赖。对于一些简单的样式需求或需要动态计算样式的情况，内联样式可以提供一种简洁和灵活的解决方案。
对于React和RN开发者，如果对内联样式感到糟糕，可以考虑使用其他样式解决方案，如CSS模块化、CSS-in-JS或CSS预处理器。这些解决方案可以提供更好的代码组织和样式复用性。
腾讯云提供了一系列与React和RN相关的产品和服务，如云服务器、云数据库、云存储等，可以帮助开发者构建和部署React和RN应用。具体产品介绍和链接地址可以在腾讯云官网上查找。
相关·内容
我有一个React.js应用程序配置webpack与服务器端渲染。当用户在url中输入"lang“参数时，我将加载一个基于语言的css文件。我想确保我的语言特定的css文件加载在最后。
现在，我的react组件的css导入正在覆盖我的全局语言css文件。如何确保用language.css文件编写的css规则覆盖所有css规则，甚至那些带有动态组件的css规则？
浏览 4提问于2022-08-09得票数 0
2回答
你认为用React内联样式来处理伪选择器样式的好方法是什么？它的优点和缺点是什么？
假设每个React组件都有一个styles.js文件。您可以使用该样式文件设置组件的样式。但是你想在一个按钮(或其他什么东西)上做一个悬停效果。
一种方法是有一个全局CSS文件，并以这种方式处理样式伪选择器。这里，类'label-hover‘来自一个全局CSS文件，而styles.label来自组件样式文件。
<ControlLabel style={styles.label} className='label-hover'>
Email
</ControlLa
浏览 1提问于2017-04-30得票数 36
回答已采纳
我正在做react。通常我所做的是在一个单独的文件中设置所有的样式，也就是全局的。我读到还有一些其他方法，比如JS中的组件级别样式或css，但无法得出我应该使用哪种方法?？ 我只是想知道哪种方式适合需要什么..
浏览 20提问于2019-05-09得票数 2
回答已采纳
2回答
将全局类名与组件特定样式结合起来
、、、、
我正在构建一个设计系统，我把重点放在体系结构上--我希望它是一个良好的开发经验。
引导在这个系统中使用，但也与组件特定的样式一起使用.我想我想要CSS-in-JS，因为我喜欢在实际组件中编写样式，而不是在不同的CSS文件中。
我有个主意，就像这样：
const componentSpecificStyle = `margin-bottom: 0rem;`
const globalBootstrapClass = ['card', 'card-body']
return <div someArgument={componentSpecificStyl
浏览 3提问于2021-03-05得票数 0
1回答
我正在做一些关于React的研究，并开始在sass加载程序中进行CSS/SCSS模块处理的实验。我已经完成了大部分的设置，但是我遇到了一个问题，我不太清楚如何解决，我在下面的场景中介绍了这个问题：
ComponentA.jsx
import React from 'react';
import ComponentB from './app/components/ComponentB.jsx';
// Importing Core CSS module for component A
require("./ComponentA.scss");
浏览 2提问于2016-10-10得票数 3
回答已采纳
3回答
我正在使用构建我的React。
但是，有一个组件必须嵌入到另一个站点。这意味着，我提供这个组件的产品构建嵌入到一个不同的网站。
我的React应用程序的css被该网站中定义的全局样式覆盖。
我不想要这种行为。有什么办法，我可以隔离我的反应应用程序的css和其他网站的全球css。
我看到了，但是解决方案对我没有帮助。
浏览 0提问于2019-08-24得票数 6
回答已采纳
在使用HTML时，是否有CSS选择器或React本机支持的指示符来选择CSS中的所有组件(如主体选择器)？
我们不选择组件来对它们进行样式化，这与html不同；我们选择要被样式化的html元素，例如，从css工作表中选择标签名。相反，在react中，样式名称被放入组件中，即标记中。
浏览 3提问于2015-09-01得票数 9
回答已采纳
我正在尝试创建一个8列的表，每一列都包含<input />元素。由于某些原因，我在文本输入的on change事件中遇到延迟。将列数减少到4列以下会使体验更好。这可能有一定的意义，但我也尝试增加了列的数量，我发现对于10个或更多的列，体验再次变得很好。您可以查看我的超级简单的React应用程序，其中您可以动态更改columns - 的数量。
这是我的代码：
import React from 'react';
import { AutoSizer, Table, Column } from 'react-virtualized';
class Ap
浏览 14提问于2019-08-01得票数 13
我正在研究在React应用程序中设置页面样式的最佳方式。我在react中看到了很多可以样式化的库，比如Styled Components，Glamor，CSS Modules。
在我目前的项目中，我正在使用CSS模块(主要是为了摆脱css冲突和页面特定的CSS)。我用谷歌搜索了很多关于为什么我应该使用样式组件和CSS-in-JS的问题，但我没有得到任何具体的答案。所以我的问题是，使用CSS-in-JS或样式组件是否有实际的性能优势，或者它只是语法上的糖。
浏览 0提问于2018-09-19得票数 26
在角2中，我们可以对模板和样式使用内联或url方法。使用url有利于模块化、可读性，IDE还提供代码辅助。使用url会导致来自浏览器的额外请求，这可能会导致性能下降。使用模板和样式的推荐方法是什么--内联或url？
来自的示例
template: 'Hello {{name}}'
templateUrl: 'my-component.html'
styles: ['.primary {color: red}']
styleUrls: ['my-component.css']
浏览 1提问于2016-06-05得票数 0
4回答
我想了解在React/Vue.中使用CSS模块的好处。
目前，在我的公司中，开发人员在开发中使用以下方法：
return (
<div className={styles.User}>
<div className={styles.name}>...</div>
</div>
)
在使用CSS模块文件时，如下所示：
.User {
background-color: var(--bg-color, red);
.name { color: white; }
}
HTML的输出应该是什么，例如：
&
浏览 16提问于2022-09-02得票数 -1
2回答
Gatsby当前链接颜色
、、、、
我是Gatsby，js和react的新手，但我正在尽我最大的能力创建一个网站。到目前为止，我已经能够通过混合使用gatsby和css教程来解决大多数问题。然而，我被困在了一个我想做的小改变上。我在我的网站上有一个标题，上面有我用ListLink添加的导航链接
const ListLink = props =>
<li style={{ display: `inline-block`, marginRight: `1rem` }}>
<Link to={props.to} style={{ fontSize: '17px', textTransfo
浏览 2提问于2018-10-10得票数 2
1回答
我有一个react组件，在css文件夹.In APP.js(load1.jsx，load2.jsx，load3.jsx)中定义了多个(one.css，two.css，three.css)文件，我们已经配置了所有的js文件。
one.css应用于load1.jsx，two.css应用于load2.jsx，three.css应用于load3.jxs，但是one.css的样式被load1.jxs中的three.css覆盖。
如何在react js中修复这个问题。
浏览 0提问于2021-04-15得票数 1
2回答
关于使用React动态插入SASS类的最佳实践的基本问题。 我有一个带有两个属性的React组件：componentId和color。组件以列表的形式呈现。每次呈现它们时，我希望它们将组件的CSS背景颜色设置为this.props.backgroundColor。 我知道我可以使用内联样式做到这一点，但由于难以维护它，这通常是不受欢迎的。我目前有一个包含多个类的SCSS文件。 如何使用类名this.props.componentId和颜色this.props.backgroundColor动态附加SCSS类？ 例如，如果组件的this.props为 componentId: list-ite
浏览 37提问于2019-02-11得票数 0
回答已采纳
我已经阅读了上下文API，它看起来是解决react的单向数据通信问题的一种优雅的方法。
然而，还有Redux，它在共享全局状态方面做得很好。
如果我使用上下文API和钩子，有没有什么性能上的好处？
PS:我读到有了context API，我们必须控制渲染，因为它有时甚至会使整个应用程序重新渲染。
浏览 0提问于2019-09-08得票数 14
我正在使用React，并且有一个包含两个组件的页面：
return (
<div>
<NewNavbar />
<Row />
</div>
)
NewNavbar组件如下所示：
const App = () => (
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Br
浏览 4提问于2021-11-24得票数 0
我目前使用的Draft.js在我的反应应用程序。它通过node_modules加载，然后在组件中使用，例如：
import { Editor } from 'draft-js'
..。
class MyComponent extends React.Component {
render() {
return(
<div>
<h1
style={ styles.header }
>Some header</h1>
&
浏览 3提问于2016-09-19得票数 0
回答已采纳
1回答
我目前正在开发一个大型的React应用程序。Css，从来都不是我的强项。但是现在CSS有了sass / cssNext /内联样式。我一直在使用BEM和sass，但随着我的其他应用程序变得巨大，甚至开始崩溃。特别是当你有能力“重新皮肤”或“主题”的网页以外的主要配色方案等。
所以例如,
<MyComponent />
// this component has its styles but lets say Joe Schmoe wants be import
// it? But, Joe wants to overlay his custom styles?
// Is th
浏览 3提问于2016-11-29得票数 14
回答已采纳
25回答
开发工具千千万，哪个最高效最好用？
在关键时刻解决了你的卡点和痛点，欢迎你和我们一起分享你使用过的腾讯云宝藏工具！
点赞最高的前5名将获得猫王小王子花梨原木便携蓝牙音箱1个（截止时间：11月12日24:00）
另外在11月9日晚20:00-21:00
【开箱吧腾讯云】将迎来3位开发大神分享自身工具箱
快来腾讯云开发者视频号预约吧！更有超多双十一产品优惠等你！
图片
浏览 1795提问于2022-11-02
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
