React本机组件样式的最佳实践
是使用CSS模块化或CSS-in-JS的方式来管理组件样式。这种方式可以避免全局样式的冲突，并提供了更好的可维护性和可重用性。
CSS模块化是一种将CSS样式文件与组件进行关联的方法。每个组件都有自己的CSS模块，其中定义的类名只在该组件内部有效，不会影响其他组件。这样可以避免样式的命名冲突，并且使得组件的样式更加独立和可复用。在React中，可以使用Webpack的css-loader来支持CSS模块化。
CSS-in-JS是一种将CSS样式直接写在JavaScript代码中的方法。通过使用特定的CSS-in-JS库，可以在组件中直接定义样式对象或使用CSS语法来描述样式。这种方式可以更好地将样式与组件逻辑结合起来，并且可以根据组件的状态动态生成样式。常用的CSS-in-JS库有styled-components和emotion。
无论是使用CSS模块化还是CSS-in-JS，都可以通过以下方式来实现React本机组件样式的最佳实践：
- 将样式与组件紧密关联：将组件的样式定义在组件文件中，使得样式与组件的逻辑紧密结合，方便维护和重用。
- 避免全局样式的冲突：使用CSS模块化或CSS-in-JS可以避免全局样式的冲突，确保组件样式只在组件内部有效。
- 使用组件化的样式命名：为了避免样式的命名冲突，可以使用BEM（块、元素、修饰符）或其他组件化的样式命名规范。
- 样式的复用：通过定义可复用的样式类或样式对象，可以在多个组件中共享样式。
- 动态生成样式：使用CSS-in-JS可以根据组件的状态或属性动态生成样式，实现更灵活的样式控制。
- 使用样式预处理器：如果需要使用样式预处理器（如Sass、Less），可以在Webpack配置中添加相应的loader来支持。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我通常在index.css中定义全局样式。定义全局风格的最佳实践是什么？当我在React应用上工作时，我应该在什么时候把它放在index.css和App.css中？
浏览 49提问于2020-01-15得票数 3
回答已采纳
我正在建立我的第一个react网站，我想问一下，当涉及到样式时，最佳实践是什么。是为每个组件创建不同的样式表更有意义，还是将所有组件的样式放在一个样式表中更有意义。
浏览 3提问于2019-09-11得票数 2
是否可以使用react原生应用程序中的所有reactjs组件?如果不能，在react js和react native之间切换的最佳方式是什么？
如果应用程序是使用react js完成的，那么是否有必要(强制)在其中使用redux？
浏览 3提问于2016-06-20得票数 12
4回答
如果我在我的项目中添加了@type/styled组件，那么构建输出中就会出现一堆错误：
ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(36,15):
TS2300: Duplicate identifier 'FormData'.
ERROR in /Users/me/projects/react/node_modules/@types/react-native/globals.d.ts(81,5):
TS2717: Subsequent property de
浏览 0提问于2019-02-15得票数 30
回答已采纳
我从react开始，在许多项目中我注意到了以下编码风格：
方法1：
const Date = styled.h3`
margin: 0 1rem 0.5rem 1rem;
color: gray;
`
const ReadingTime = styled.h4`
margin: 0 1rem 1.5rem 1rem;
color: gray;
`
const Excerpt = styled.p`
margin: 0 1rem 1rem 1rem;
line-height: 1.6;
`
<Post>
<Link to={`/${sl
浏览 0提问于2019-07-10得票数 0
我有一个react本机项目( but本机用于macOS)，我正在使用输入组件，但请注意有一个蓝色的大纲。不知道怎么移除它。我使用的是本机基础输入组件，据我所知，它使用的是react本机输入组件。我如何删除丑陋的蓝色轮廓时，聚焦。我主要是想把正方形的
import React from 'react';
import {Icon, Input} from 'native-base';
import Ionicons from 'react-native-vector-icons/Ionicons';
const SearchBar = () =&
浏览 5提问于2022-07-15得票数 0
2回答
反应中常见的风格-本土化
、、、
背景:我对反应完全陌生--本地人。
问:从一个有经验的角度来看，我为什么不应该这么做？
目标：-有共同的风格在我的反应-本地应用？-使用优势的VSCode IntelliSense的开发。
#common/styles.js
import { Platform, StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
fontFamily: {
...Platform.select({
ios: {
fontFamily: 'Bas
浏览 0提问于2018-03-05得票数 0
1回答
我一直在尝试设置触控笔，以使用StyleSheet和styled-component混合的React。
使用以下配置
{
"processors": [
"stylelint-processor-styled-components"
],
"extends": [
"stylelint-config-styled-components"
],
"plugins": ["stylelint-react-native"],
}
对于shadowOffset: { w
浏览 0提问于2019-03-15得票数 1
我正在研究在React应用程序中设置页面样式的最佳方式。我在react中看到了很多可以样式化的库，比如Styled Components，Glamor，CSS Modules。
在我目前的项目中，我正在使用CSS模块(主要是为了摆脱css冲突和页面特定的CSS)。我用谷歌搜索了很多关于为什么我应该使用样式组件和CSS-in-JS的问题，但我没有得到任何具体的答案。所以我的问题是，使用CSS-in-JS或样式组件是否有实际的性能优势，或者它只是语法上的糖。
浏览 0提问于2018-09-19得票数 26
1回答
当我在app本机应用程序上使用安装命令( npm
── UNMET PEER DEPENDENCY normalize.css@^4.0.0
├── UNMET PEER DEPENDENCY react-addons-css-transition-group@^0.14.0 || ^15.0.1
├── UNMET PEER DEPENDENCY react-dom@^0.14.0 || ^15.0.1
└─┬ react-toolbox@1.0.1
├── classnames@2.2.5
├── core-js@2.4.0
└── react-css-themr@1.1
浏览 1提问于2016-07-07得票数 0
回答已采纳
我不确定在ReactJS中处理CSS的最佳实践是什么。有了create-react-app，它会自动生成一些.css文件，所以我自然而然地继续这样做。但有时，使用内联CSS来调整页面的某些元素会更方便。有时我见过需要在常量中设置样式并在组件中使用它们的组件。在ReactJS项目中处理CSS的指导原则是什么？
我现在要做的是(如果需要的话)为每个组件创建一个包含我可能多次使用的类的.css文件，并使用内联像marginTop: 5px一样做一些小的调整。这是不是很糟糕？
浏览 3提问于2019-10-11得票数 2
因此，我在React Native中创建了一个自定义组件，它只是包装了一个TouchableOpacity并将其转换为一个很好的按钮组件。虽然当我使用组件的动画版本(通过createAnimatedComponent)时，它不会移动，但有人知道为什么吗？
const AnimatedMainButton = Animated.createAnimatedComponent(MainButton);
...
render() {
return <AnimatedMainButton style={{transform: [{translateX: 100}]}} />
}
浏览 3提问于2017-07-29得票数 0
是否有一种方法在反应本机应用程序中处理scss文件？我只是好奇，而且对react本机应用程序架构不太了解，但我正在考虑使用我当前的项目scss文件来处理我们计划构建的新的react本机android项目。
REACT原生版本："0.46.4"
REACT版本：“16.0.0-字母12”
BABEL-预设反应-本机："2.1.0"
更新:
我搜索了一下，它允许我将我的css转换成react-本地样式表对象，有点为我解决的方法。
谢谢。
浏览 1提问于2017-08-19得票数 8
回答已采纳
我们在React Native应用中使用了带有eslint的Airbnb代码风格指南。既然React Native不使用超文本标记语言，那么规则react/no-unescaped-entities是必要的吗？
这条规则迫使我使用：
<Text>{`"${this.state.quote}"`}</Text>
而不是：
<Text>"{this.state.quote}"</Text>
浏览 4提问于2017-07-11得票数 1
我想在React开发中使用一些好的模式(对于样式)。据我所知，React.js封装了组件的样式(如果我理解正确的话)。
我可以/应该使用7-1模式(当然是使用shame.scss文件)吗？如果没有，您推荐的最佳实践是什么？
浏览 13提问于2019-07-19得票数 2
回答已采纳
2回答
我想在react-native项目中渲染。但是模拟器显示了错误:不变违规：View config没有找到名称div是什么问题？有没有在react-native中呈现<div>的解决方案？
代码示例：
render() {
return (
<div>123</div>
);
}
浏览 0提问于2018-01-10得票数 10
回答已采纳
2回答
我应该如何组织React项目中的样式组件？我的意思是，举个例子--我有一个想要添加样式的导航栏组件。我应该创建单独的文件NavbarStyle并将其导入导航栏，在导航栏组件中创建NavbarStyle还是其他什么？或者它只适用于按钮之类的通用组件？
对于这个按钮和其他按钮-我应该创建单独的文件，例如在styledComponents文件夹中，还是创建一个包含所有这些文件的文件，然后导入所需的元素？我知道这主要取决于我们的偏好，但我想听听一些最佳实践的建议(看起来StyledComponents文档没有提到在项目中对它们进行修改)。
浏览 20提问于2017-05-23得票数 1
我正在尝试在react-native版本0.59.9中的视图周围创建一个框阴影
我已经尝试了'shadowOffSet‘和所有的阴影属性，但是没有用处
import React, { Component } from 'react';
import { Text, View, StyleSheet, PixelRatio } from 'react-native';
const styles = {
container: {
flex: 1,
alignItems: 'center',
浏览 0提问于2019-07-08得票数 2
下面是我的组件的代码。问题是，我不能在按钮之间添加任何空间，只能在Android模拟器上添加空间，就像您在图像中看到的那样。现在您可以看到marginBottom，但是如果我用填充代替它，它仍然不能工作。感谢有谁知道为什么会发生这种事。
import React from 'react';
import { StyleSheet, View} from 'react-native';
import { Button } from 'react-native-elements';
const HomeScreen = ({navigat
浏览 5提问于2020-09-14得票数 0
回答已采纳
1回答
我刚刚开始使用React来进行更改，并且遇到了一个似乎无法解决的错误。
一切都很好，除了无论我做什么，都会不断抛出“无法解析./src/style.css”或“这些文件都不存在：./src/style.css”。
我的项目结构相当超前：
App
.expo
.expo-shared
assets
node_modules
src
components
screens
style.css
App.js
~everything else
我的App.js包含以下语句：import '.
浏览 4提问于2021-09-01得票数 3
回答已采纳
我使用的是react本机元素搜索栏，并希望右边是占位符，左边是文本条目。
您似乎只能使用文本对齐来确定键入的位置，因此我尝试使用状态使文本位于左侧，在右边使文本更加突出。但是这个解决方案也不起作用。
有什么想法吗？
浏览 3提问于2018-04-09得票数 0
回答已采纳
1回答
来自前端的way框架，如react和vue，我很难找到编写可重用小部件样式的最佳方法。让我用一个例子来说明这个问题。
假设我们有这个Widget：
Container(
width: 25,
height: 10,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
border: Border.all(
color: Colors.black,
width: 8.0,
),
),
child: /* some custom widget */,
);
浏览 0提问于2019-09-14得票数 7
回答已采纳
我正在学习React，我想使用这些库中的一个来进行造型设计
ReactStrap
材料用户界面
对于我来说，下一步也是学习Reactive原住民，我想知道是否会有一个类似的样式库，无论是React还是本土的，差别都很小吗？
因此，我可以学习并使用一个库来响应js和本机，而不是对每个库使用两种不同的东西。
浏览 4提问于2020-08-22得票数 0
回答已采纳
3回答
我目前正着手处理。
在文档中的一些CodeSandbox演示(例如)中，导入的东西称为“动画”：
import { Transition, animated } from 'react-spring'
然后像这样使用：
{this.state.items.map(item => styles => <animated.li style={{ ...defaultStyles, ...styles }}>{item}</animated.li>)}
在其他例子中，没有使用这一点：
import { Spring } from 're
浏览 3提问于2018-10-17得票数 6
回答已采纳
当我使用style属性alignItems:"center“表示父元素视图(包含react导航组件)时，它将显示空白屏幕。
但是没有这个属性，所有的东西都能正常工作，只是内容不是中心的。
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import MainScreen f
浏览 1提问于2019-07-09得票数 0
回答已采纳
1回答
我正在构建一个应用程序，作为一个测试，我将令牌存储在密钥链中。在导航中，我使用堆栈导航器和切换导航器。我正在尝试从密钥链中检索令牌，并使用它来确定intialRouteName :如果令牌存在->主，如果没有->身份验证。
这是我的密码：
Navigation.js
import React, { Component } from 'react'
import {
createStackNavigator,
createAppContainer,
createSwitchNavigator
} from 'react-navigation
浏览 2提问于2019-06-02得票数 0
尝试从单独的文件调用组件类GlobalHeader。
Problem是，它不会在任何其他标记中显示。
我试过：
将带有StyleSheet的flex: 1添加到Container、Header和GlobalHeader中
删除native-base组件并与react-native组件保持一致。
玩弄export default (怀疑这就是问题所在)
将ES6 import替换为NodeJS require
玩弄GlobalHeader的结构(在里面放容器等等)
我可以在这里成功地调用和渲染它：
如果它在另一个标签里；是的，我试过各种各样的标签：
浏览 2提问于2016-12-15得票数 0
回答已采纳
1回答
app.Lines中的所有多行文本标记上都有行，只显示在iPhone Plus上，而不是在iPad、tab、android或任何其他设备上。
知道怎么修吗？文本上的线条类似于下面的图像：
import React, {Component} from "react";
import {
Image,
View,
StatusBar,
TouchableOpacity,
WebView,
Dimensions,
Linking,
ScrollView,
NetInfo,
Alert
} from "react-native";
浏览 0提问于2018-02-13得票数 0
回答已采纳
我试着用反应性路由器和反应过渡组来激活我的路线。我有我的动画开关组件，动画之间的切换组件。
import React from 'react';
import { Route, Routes} from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
const AnimatedSwitch = ({ animationClassName, animationTimeout, children }) =>
浏览 3提问于2022-08-12得票数 0
回答已采纳
1回答
响应样式的组件性能
、、、
我正在使用React和样式组件的网站工作。然而，网站的移动速度非常慢，谷歌Chrome控制台上也出现了警告：
违反长期运行的JavaScript任务占用305
因此，我发现了的这个问题，并寻找什么减缓我的应用程序与反应开发工具。我创建了包含许多呈现项的新的空页面：
import * as React from 'react'
import { render } from 'react-dom'
const items = new Array(5000).fill({ title: 'Title', description: 'This
浏览 1提问于2020-03-18得票数 14
我的滚动视图根本没有在我的屏幕上显示我所有的组件。
我该如何解决这个问题呢？正如您在下面的代码中看到的，这里有一个图像和4个文本输入。但是滚动视图只显示图像和2个文本输入。我在滚动视图中放置了一个边框来查看它的大小，它是整个屏幕的大小。
下面是我的代码：
render(){
return (
<ScrollView style={styles.container}>
<TouchableOpacity onPress={this.myFun} style={styles.choosePhoto}&
浏览 0提问于2019-12-05得票数 0
2回答
有没有办法和一起使用？react-bootstrap公开了组件的bsClass属性，而不是className属性，这似乎与样式组件不兼容。
有什么经验吗？
浏览 12提问于2017-08-26得票数 51
我有一个问题，为什么react-native支持像View这样的标记名，而不支持Div？Html标记对于Html5开发人员来说更熟悉。为什么不使用Html标签呢？
浏览 0提问于2016-03-16得票数 1
我正在阅读一本“反应学习”教材，它解释了我对胡克斯的看法。钩子部分工作正常。
作者演示了如何用一些易于使用的样式和相关组件定制钩子。
我有下面的代码。
import React from 'react';
// import logo from './logo.svg';
import './App.css';
import StarRating from './components/StarRating';
import StarRating2 from './components/StarRating2';
i
浏览 0提问于2020-09-15得票数 1
回答已采纳
我正在使用流程0.42.0在一个反应本机项目与核素。
对于默认项目，我得到以下消息：
以及以下错误：
> flow check
index.ios.js:40
40: <View style={style.container}>
^^^^^^^^^ property `container`. Property cannot be accessed on possibly undefined value
40: <View style={s
浏览 5提问于2017-05-07得票数 23
我是Reactjs世界的新手，我已经编写了组件，我想用CSS让它变得更漂亮:)
我有几个按钮和框组成的组件，这将在按钮被点击后显示。
class Days extends React.Component {
constructor(props) {
super(props);
this.state = { showComponent: "Box1" };
}
toggleDiv = name => {
if (name === "monday") {
this.setState({
show
浏览 2提问于2018-08-03得票数 0
我刚开始使用React，我有一个简单的问题，我在任何地方都找不到。
那么，每个React组件都应该有自己的样式表吗？
例如，如果我有一个呈现给浏览器的主App组件，我应该只在其中包含一个css文件并包含所有样式吗?还是每个组件都有一个自己的css文件更好？
谢谢。
浏览 4提问于2018-05-02得票数 11
2回答
不要单独设计每个元素的样式，比如在我的本地应用程序中，不同页面/组件上的许多元素的背景色.
通用元素的全球造型的最佳实践是什么？有效的方法。谢谢你们。
PS :我使用的是函数而不是类，而且我对这种反应本机的东西还不熟悉。
浏览 8提问于2020-09-22得票数 3
回答已采纳
我正在玩一个小应用程序的react本机，我想知道是否有一套准备使用的组件，看上去像iOS的组件。有点像离子框架提供角度？还是我错过了已经在反应中的东西--我可以使用的本土化的东西？
为了澄清这一点，我指的是：
浏览 8提问于2016-01-06得票数 10
回答已采纳
1回答
因此，我使用以下命令构建调试应用程序
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/rescd android./gradlew assembleDebug
现在，该应用程序获得成功的构建，并得到了安装。另外，第一个屏幕工作得很好，但是在进入下一个屏幕之后，它就崩溃了。
以下是应用程序链接：
这是我
浏览 0提问于2021-06-08得票数 0
2回答
这实际上是我在react上的第一批组件之一(也是react原生的)，所以不要发誓如果错误是基本的。
我想要创建一个flex组件，并将子组件和direction="column"参数传递给它，但是我仍然拥有flex-direction: row
怎么啦？
file 'flex.js':
const StyledFlex = styled.View`
display: flex;
flex-direction: ${props => props.direction || "row"};
`;
const Flex = (prop
浏览 4提问于2022-10-07得票数 0
回答已采纳
例如，如果我需要创建一个按钮的“小”和“大”版本，它具有许多(但不是所有)方法和状态的共同之处，那么在React Native中实现这一点的最佳方式是什么？
我对简单地扩展“父”组件的问题(这一点我可能是错的)是，使用Props已经很混乱了。
我实现它的方法很简单，就是给“父”组件一个布尔值(在本例中，用来表示“小”或“大”)，然后根据这个布尔值改变它的特性。“子”组件很大程度上只是为了可读性。
浏览 0提问于2017-11-12得票数 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
回答已采纳
当我使用来自：的头组件时
import React, { Component } from 'react';
import changeNavigationBarColor,{ showNavigationBar } from 'react-native-navigation-bar-color';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
import { main, discoverPage } from
浏览 7提问于2020-11-10得票数 0
回答已采纳
当使用动画组件，即Animated.View与使用常规组件，即在react原生中查看时，是否有任何性能影响？
代码示例：
<View>
<Text>asd</Text>
</View>
Vs
<Animated.View>
<Text>asd</Text>
</Animated.View>
我从来没有见过人们在使用动画组件时提到任何性能影响，但如果没有，为什么React开发人员没有默认将所有组件都设置为动画组件。
浏览 1提问于2018-02-19得票数 3
我正在学习ReactiveJS.css样式可以应用于src文件夹中的组件。但是，下面是一个查询，如何将CSS样式应用于位于公用文件夹中的HTML的正文标记。我尝试过将CSS样式放置在HTML文件中，但它不是reflecting.How，我可以将CSS样式从src文件夹应用到公用文件夹的HTML文件中吗？这有可能吗？
<link rel='stylesheet' href='style.css'/>
<meta charset="utf-8" />
<link rel="icon"
浏览 14提问于2022-06-06得票数 1
5回答
我有一个简单的counter React应用程序，我希望每当计数器是5的倍数时，按钮的颜色就会变成绿色。考虑到最佳实践，最好的方法是什么？ 到目前为止，我的代码如下： App.js文件： import React, { useState } from "react";
import Counter from "./Counter";
function App() {
const [counter, setCounter] = useState(0);
function increment() {
setCounter((prevCounte
浏览 90提问于2020-12-27得票数 0
回答已采纳
1回答
我正在使用React和Redux构建我的应用程序。现在我想在其中一个组件中嵌入一个Mapbox GL贴图，并在我的Redux中创建一些状态来反映贴图的状态。
将React Redux应用程序与Mapbox GL结合的最佳方式是什么，以便我的React元素可以与地图交互？
浏览 1提问于2016-08-05得票数 3
这在React Native中运行得很好，在React中似乎也运行得很好。我假设因为我使用的是Create React App，所以我在这里得到了ESLint错误，而不是用React Native。我不能禁用no-undef，因为这会影响很多有用的检查，而且我也不确定是否可以自定义eslint来匹配React Native的方式。
如果不允许，那么将变量/对象放在React组件上的最佳方式是什么？一个示例用例是我想从样式对象引用this.props。
理想情况下，我希望避免将内容放在render方法上，因为样式对象可能会变得非常大(或者这是最好的方法吗？)
我想要做的示例(它可以工作，但会出现
浏览 0提问于2018-04-10得票数 0
2回答
我目前正在为我公司的React Native应用程序开发设置一个样板代码。我们是React Native和Mobile App开发的新手，但有大量的React/JS开发人员。 我想知道React Native中组件样式的最佳实践是什么。我很想知道你是如何构造你的样式代码的，你用什么方法来设计样式。 我查阅了几篇文章，关于使用内联样式、核心库中的StyleSheet组件或使用诸如StyledComponents之类的库的方法，有各种不同的观点 就代码结构而言，我目前使用index.js和styles.js将我的组件拆分到自己的文件夹中。对于即将到来的更多组件开发，这是一个可扩展的解决方案吗？
浏览 27提问于2019-05-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
