从react组件库中提取css
从React组件库中提取CSS是指从已有的React组件库中提取出相应的CSS样式，以便在自己的项目中重用这些样式。
提取CSS的好处是可以减少重复的工作，避免重新编写相同的样式代码。同时，使用已有的组件库可以提高开发效率，减少错误和调试时间。
在React中，可以通过以下几种方式从组件库中提取CSS：
- 直接引入组件库的CSS文件：大多数React组件库都提供了相应的CSS文件，可以直接将其引入到项目中。这样，组件库中定义的样式就会应用到项目中使用的组件上。
- 使用CSS模块化：CSS模块化是一种将CSS样式与组件绑定的技术，可以避免全局样式冲突的问题。通过使用CSS模块化，可以将组件库中的CSS样式与项目中的组件进行关联，实现样式的复用。
- 使用CSS-in-JS库：CSS-in-JS是一种将CSS样式直接写在JavaScript代码中的技术。通过使用CSS-in-JS库，可以将组件库中的CSS样式以JavaScript对象的形式导入到项目中，并在组件中使用这些样式。
相关·内容
1回答
用例：
我们正在从外部数据库(mySQL)中获取颜色、十六进制代码和大小等样式，并通过axios将它们提取进来。
将这些变量从Javascript文件传递到我们的CSS样式的最简单方法是什么？
我们知道我们可以在React中做到这一点，但是我们希望使用基于类和基于组件的CSS来提高它的可伸缩性。
下面是我们的axios获取的一个例子：
axios.get(`/landingPage/${ customerId }`)
.then((response) => {
console.log(response);
this.setState({
databaseS
浏览 1提问于2018-04-06得票数 1
1回答
我的基本理解是，像connect (用于连接redux store)之类的HOC和其他HOC在导出组件时会应用到该组件。
像这样
import React, { Component } from 'react';
import './App.css';
import myHoc from './myHoc/index';
class App extends Component {
render() {
return (
<div className="App">
</div&
浏览 1提问于2017-07-25得票数 1
1回答
我正试图用我认为是纯redux的方式来实现一个应用程序。将数据从存储库中取出，而不是通过道具。
在下面的示例中，我不需要将道具传递给List组件。它使用list从商店中提取connect。但是，我看不出有任何方法可以不使用道具将element从list中提取到Element组件中。有没有办法做到这一点而不让它通过道具？
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import {createStore} from 'redux'
import
浏览 1提问于2018-07-07得票数 0
回答已采纳
3回答
我正在尝试使用我的自定义CSS库作为我的组件在NextJS。在我的组件中，我想导入我的自定义CSS文件，但是它不能工作。
import React from 'react'
import '../../style/custom.module.css'
function Footer() {
return (
<div className="a b">
</div>
)
}
export default Footer
我的自定义CSS文件位于
样式/定制.module.css
我看
浏览 1提问于2021-02-27得票数 0
4回答
我正在尝试使用"import“/ css /banner.css将样式从.css文件导入到react js文件中，并安装并启用css-加载程序和样式加载器。它应该是导入css的最直接和最简单的方法，但样式不适用。
我试图在不使用其他库(如样式组件或jss )的情况下实现这一点。
banners.css:
.headerItem{
width: 20vw;
float: left;
background-color: cadetblue;
margin: auto;
padding: 3em;
text-align: center;
}
Header.js
imp
浏览 5提问于2020-03-12得票数 0
1回答
所以我得到了一个流星设置，类似于trello的图形用户界面，基于blaze，但带有react组件，我想使用这个库来显示一些弹出窗口(请随意建议react替代方案)。
所以我这样做了，在client/components/main/header.js的标题栏中
import React from 'react';
import Alert from 'react-s-alert';
import 'react-s-alert/dist/s-alert-default.css';
import 'react-s-alert/dist/s-a
浏览 2提问于2017-05-31得票数 1
我是react.js的新手。我下载了一个主题，里面有外部的JavaScript库，比如bootstrap.min.js，jquery.min.js，slider.js，jquery-Flexlider.min.js。
我使用create- React -app创建了一个react应用程序，我复制了react应用程序公共文件夹中index.html中的所有外部JavaScript库和CSS文件，并复制了我下载的app.js中我的主题的所有index.html的html。所有的CSS都工作得很好，但是JavaScript库不能在页面上工作。
下面是我如何在公共文件夹的index.html中包含cs
浏览 7提问于2017-08-25得票数 1
4回答
大家好，我刚开始使用React .Just，我想把我的组件渲染成app组件，但我不能这么做，下面是我的代码： conditionalView.js： import React, { Component } from 'react'
export class conditionalView extends Component {
render() {
return (
<div>
<h2>Conditional View</h2>
<
浏览 29提问于2021-07-26得票数 1
回答已采纳
如何使用react和react路由器创建多个页面，其中页眉和页脚将是静态的，内部内容图像、文本等将从.json文件中提取
我已经有这样的东西了
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Contact.css';
const title = 'Contact Us';
function Contact(props, cont
浏览 0提问于2016-12-06得票数 0
1回答
我正在使用样式组件库样式我的网站。我想在导入的react图标组件中进行更改。例如:如果我使用的是普通CSS，那么我可以很容易地在
<i class="fab fa-facebook"></i>
以CSS中的标记为目标。
但是在react中，我使用了react图标库，我使用了这个图标作为组件。例如：
<FaGithub />
如何在不使用内联CSS和样式组件的情况下对该组件中的字体大小和线条高度进行更改。
浏览 5提问于2022-07-21得票数 1
回答已采纳
1回答
我在/customerOrders/13页面中，然后尝试使用navigate('/customerOrders/14')重定向到/customerOrders/14。即使更新了URL，页面也不会重定向到/customerOrders/14。
下面是我从代码库中提取的与此相关的代码片段。
App.js
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
...
<BrowserRouter>
<Routes>
<Route
浏览 1提问于2022-01-25得票数 7
回答已采纳
1回答
我正在尝试构建一个可以在其他应用程序中使用的react组件库，但我遇到了一个用组件库打包css/less的问题。
在组件库包中：
component.tsx
import React, { ReactElement } from 'react';
import styles from "./component.less";
const TestComponent: React.FC = (): ReactElement => {
....
return (
<div className={styles.root}
浏览 21提问于2021-05-20得票数 0
回答已采纳
1回答
我想使用React创建一个类似于JSFiddle的UI：
用于HTML、CSS和JS的面板
预览面板
一个更新预览的“运行”按钮
我想使用微软的的HTML，CSS和JS面板，以获得语法突出显示和自动完成。
我已经抽象出一个通用的MonacoEditor组件。我的组件层次结构如下所示：
<Root>
<div>HTML <MonacoEditor /></div>
<div>CSS <MonacoEditor /></div>
<div>JS <MonacoEdi
浏览 2提问于2016-10-09得票数 0
我正在研究在React应用程序中设置页面样式的最佳方式。我在react中看到了很多可以样式化的库，比如Styled Components，Glamor，CSS Modules。
在我目前的项目中，我正在使用CSS模块(主要是为了摆脱css冲突和页面特定的CSS)。我用谷歌搜索了很多关于为什么我应该使用样式组件和CSS-in-JS的问题，但我没有得到任何具体的答案。所以我的问题是，使用CSS-in-JS或样式组件是否有实际的性能优势，或者它只是语法上的糖。
浏览 0提问于2018-09-19得票数 26
2回答
在react中，我想知道是否有一种方法来测试react键是否是唯一的。我展示了一系列的专辑，它们都是从mongodb中提取出来的。数据库的设置方式是，数据库可以包含重复的条目，是的，必须是这样的，不，我不是在寻找删除数据库查询中重复项的方法。希望在反应中做到这一点。
当您向下滚动页面时，客户端一次从db加载20个结果，在继续滚动时根据用户生成的查询获取接下来的20个结果。最终，您将遇到这些重复项，并响应生成一个唯一的键警告，因为唯一的键是一个ID字符串。
this.props.data.map( album => {
album.cover = (album.images[0]) ?
浏览 2提问于2018-04-21得票数 2
回答已采纳
我对React中的UI库和css非常陌生。我使用的是Ant Design中的数据选择器：https://ant.design/docs/react/introduce。 它们提供了CodePen示例，在css选项卡中您可以看到： @import 'antd/dist/antd.css'; 但是，当我使用‘import’./Component.css‘将其添加到我的css样式表并导入到组件中时，我在components文件夹中得到错误消息"Module not found: Can't resolve './antd/dist/antd.css'
浏览 18提问于2019-06-08得票数 4
1回答
我很难找到一种方法来可靠地存储来自react的数据状态数据，并通过URL参数将该状态导出到另一个组件。
为了给出一些背景，我有两个部分。一个包含react datepicker日历的Picker.JS组件和一个名为"DelayGuage“的单独组件，它使用API调用动态地绘制google图表图解。唯一的问题是，此API调用具有一个名为{ date }的动态参数，此{date}参数必须来自先前选定的数据交换日期。
下面是我的DatePicker代码。我遇到的问题是，当我试图在日历日期被选中(TypeError)之后调用handleSubmit()时，我一直得到“未定义的handleSub
浏览 7提问于2022-06-21得票数 0
我试图从视频to库修改现有类的样式(颜色)。
我发现我们可以从css文件中修改。但我需要修改我们从反应道具得到的颜色，这是动态的每一次。
因此，我们有一个名为vjs-control-bar的类来自视频eg库，我们需要向其应用一个color属性，该属性的值来自react。this.props.color。我们如何才能做到这一点？
<div data-vjs-player>
<video ref={node => (this.videoNode = node)} className="video-js" />
</div>
vjs-co
浏览 0提问于2019-05-31得票数 0
回答已采纳
在使用HTML时，是否有CSS选择器或React本机支持的指示符来选择CSS中的所有组件(如主体选择器)？
我们不选择组件来对它们进行样式化，这与html不同；我们选择要被样式化的html元素，例如，从css工作表中选择标签名。相反，在react中，样式名称被放入组件中，即标记中。
浏览 3提问于2015-09-01得票数 9
回答已采纳
我在导入UI库时遇到了问题，蚂蚁设计库有问题，所以我决定尝试不同的库，现在我在导入Grommet时遇到了问题。
我做错了什么？我根据文档添加了依赖项，并添加了文档中包含的示例，但仍然无法工作。
我正在尝试执行
但看起来一点都不一样
我和codesandbox.io，一起工作
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Heading from "grommet/components/Heading&#
浏览 2提问于2018-10-05得票数 0
回答已采纳
在尝试使用react本机应用程序时，我使用Webstorres2019.3.4和一个简单的空白react--用expo init myProject创建的本地应用程序项目
每当我使用<Text>等本机组件时，WebStorm就提供了自动导入功能。
但是，组件是从错误的库导入的。它从react-native-web而不是react-native中提取出来
下面是默认的package.json：
"dependencies": {
"react-native": "https://github.com/expo/react-native/
浏览 3提问于2020-04-16得票数 1
回答已采纳
在我的React中，我使用了React，并导入了
为了对其他组件进行样式化，我导入了MDBreact库，当我这样做时，组件(使用bootstrap.min.css样式)已经被MDB库的存在所影响。
如有任何解决这个问题的建议，将不胜感激。
浏览 2提问于2020-04-26得票数 0
我想创建自己的组件，所以我看了一下antDesign，它是React.js最流行的库之一。
我的问题是，我如何创建自己的自定义按钮组件，而不使用react.js中的任何CSS库或框架(Bootstrap、react.js等)，比如antDesign团队如何创建它。
任何帮助将不胜感激的一些解释和一个例子。
浏览 5提问于2019-11-05得票数 2
回答已采纳
我正在写一个react组件，我试图从App函数中提取名称到Welcome中，因此这应该显示为Hello，Sara/Hello，Jone和Hello，David。目前，它只显示为Hello，而不是Hello之后的名称。
我正在将此组件导入同一文件夹中的其他主文件中。
以下是代码
import React from "react";
import ReactDOM from "react-dom";
class Welcome extends React.Component {
constructor(props) {
super(props);
浏览 1提问于2018-08-03得票数 3
回答已采纳
我撰写了许多关于在react中使用useRef的文章。根据，Refs provide a way to access DOM nodes or React elements created in the render method.。
从所有文档中，我了解到，如果您想访问dom元素，您必须添加如下所示的ref：
<div ref={myRef}，在那之后很容易访问它。
我知道当我们访问html标记时会使用useRef。
问题：如何访问css选择器(.class, #id)，如果我的html是由库(如AntD或其他东西)生成的？
如果我不能根据react文档使用document.query
浏览 3提问于2020-05-06得票数 6
我使用了带有嵌入式CSS模块的Create React App，并安装了Bootstrap库。下面是一个示例代码： index.jsx import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.r
浏览 11提问于2020-04-17得票数 1
回答已采纳
1回答
我试图将以下数组的“dogName”值呈现给浏览器，但结果是“未定义”：
[
{
"id": 1,
"dogName": "bruce"
},
{
"id": 2,
"dogName": "borker"
},
{
"id": 3,
"dogName": "henry"
}
]
因此，首先，数据从数据库中提取
浏览 1提问于2020-07-15得票数 0
回答已采纳
我有反应申请。
我在组件的路由方面有问题
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from './app';
ReactDOM.render(
<App/>,
document.getElementById("root")
);
app.jsx
这里我是路由2组件。登录和主要组件。在主要组件中，有许多用于仪表板的路由器。
My Problem：在<Switch>中，第一个&l
浏览 0提问于2018-09-17得票数 0
回答已采纳
我正在做一个React项目，我正在尝试使用这个库()
从npm和文档中，他们说我们必须添加这些指令来导入CSS
我的组件
import React from 'react'
import "~react-image-gallery/styles/css/image-gallery.css";
import "~react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';
export fu
浏览 3提问于2021-12-21得票数 2
回答已采纳
1回答
我正在开发一个react应用程序，我已经为样式添加了react& primereact库。reactbootstrap库运行良好，但是primereact样式没有得到应用，我遵循了“入门”部分中的所有步骤，有人可以建议我缺少什么吗？我正在添加供参考的文件。我使用下面的命令在节点模块中添加文件
npm安装primereact --保存
npm安装原始图标--保存
App.js文件
import logo from './logo.svg';
import './App.css';
import Header from './MyComponents
浏览 5提问于2022-01-19得票数 0
2回答
当我选择date时，event没有看到任何东西，什么也没发生，我无法从输入字段中提取出我的value。什么？是问题反应还是数据报警器？在“数据交换手册”中没有提到这一点，
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
dueDate: 'Date and time'
}
}
componentDidMount(){
this.initDatepicker();
}
浏览 2提问于2017-07-01得票数 1
回答已采纳
我的React有问题，当我试图添加库时，我得到了以下错误：
Uncaught : this.props.media不是函数
import React, { PropTypes, Component } from 'react';
import Responsive from 'react-responsive-decorator';
import classnames from 'classnames';
import Header from '../Includes/header';
// Import stylesheets
浏览 2提问于2017-03-02得票数 0
回答已采纳
Materialize-css为你带来了很多已经烘焙好的组件。但是如果你只想在你的react应用中使用materialize-css的一个组件(日期选择器)。react会从生产版本中移除其余未使用的组件吗？或者我的react应用程序会携带整个materialzie css和js代码？ 如果react没有在生产构建中自动删除未使用的物化代码，建议一种方法。
浏览 54提问于2020-02-02得票数 2
如何使用预定义的值更改输入？为了编辑某些元素，值中的数据是从数据库中获取的，这个想法是，当用户单击“edit”时，他会有一个窗口来访问其中有旧信息的元素 import React from "react";
import "./styles.css";
export default function App() {
const arr = { company: [{ companyName: "Apple" }] };
const blockCreate = () => {
return arr.company.m
浏览 8提问于2020-01-29得票数 0
我从JavaScript文章中提取了这段代码，我想在打字本中使用它，但我在：const Contacts = ({contacts}) => {中发现了一个错误
我尝试了{contacts: []}，但没有成功。联系人位于App states中。
import React, { Component } from 'react';
import './App.css';
import Contacts from './components/contacts';
class App extends Component {
stat
浏览 0提问于2019-08-02得票数 0
回答已采纳
我不知道是我的问题，还是这些说明很糟糕--但我在使用这个日期时间选择器库时遇到了真正的问题。
我正在尝试学习如何在我的项目中实现这个库：
在我的Max上，我下载了Node.js和NPM，运行命令，查看我的Macintosh HD▸usr▸本地▸lib▸web文件夹，抓取dist文件夹，其中包含react-widgets.js，并将其放入我的web项目的文件目录中(在这个时代，似乎有很多不必要的工作)
我可以从哪里获得网站上列出的其他两个文件：
<script src="react-15.5.5.js"></script>
<scr
浏览 0提问于2019-09-13得票数 0
问题: react的相对初学者，喜欢使用create-react-app而不弹出或配置webpack，并希望实现SASS，最好使用7-1文件夹结构。我想要的是组件的独立样式表，但也有布局等全局样式表等。最重要的是，我想要有SASS变量和混合，我可以在我的所有组件中使用。
我尝试过的: 1) Node-sass-chokidar (在package.json中添加一些脚本，以便在运行npm start时自动运行css-watch，按照github.facebookincubator/create-react-app上的说明。)
Node-sass-chokidar在src目录中查找任何scss文
浏览 3提问于2017-10-03得票数 2
我遵循了为react设置ant-design-mobile的示例，我使用的是next.js -样式被加载，但不是字体。
我还提取了HTML并使用完整的ant-design-mobile CSS创建了纯HTML示例，而且它也没有加载适当的字体。
从官方的ant-design-mobile 中看到不同之处
和我的示例中的字体
另外，非常奇怪的是，在官方的ant-design-mobile文档中，他们建议不要加载完整的CSS，但是实际上包含了完整的CSS。
<!DOCTYPE html>
<html>
<head>
<m
浏览 3提问于2019-01-16得票数 0
1回答
我认为这个问题可能会超出反应的范围，但我仍然不确定是否反应本身就是问题的原因。
环境是与TypeScript反应的。我在组件文件中使用CSS导入，这样每个组件都有其特定的样式表，并且我假设在各个组件实例化之前不会将这些样式添加到<head>元素中。但是事实证明，如果我从一个文件中导入一个组件，它只是将所有组件重新导出，那么我不使用的所有其他组件的样式仍然会添加到DOM中。
下面是一个简单的示例，假设lib文件夹中有两个简单的组件-- Avatar和Button。它们看起来像这样( Button类似)：
import React from 'react';
impo
浏览 0提问于2020-08-28得票数 1
回答已采纳
我使用的是一个React库(React )，它使用CSS和Webpack：label___1nGy active___1Jur tab___Le7N tab是我正在传递的className道具在他们的Tab组件中输出该类。label和active类来自库。我想在active上应用一组不同的样式，类似于.tab.active，tab指的是我创建的样式，active与库创建的生成选择器相匹配，但无法找到如何使用css-模块来实现这一点。我需要重写这个动态选择器：.label___1nGy.active___1Jur。
[
[]
]
浏览 10提问于2016-02-04得票数 30
回答已采纳
我想将一些道具插入到我从props.children中提取的React组件中，如下所示：
<PageContainer>
<PageOne />
<PageTwo />
<PageThree />
</PageContainer>
在<PageContainer>中，我通过props.children和当前页面索引提取当前页面，如下所示：
const { children, pageIndex } = props;
let activePage = React.Children.toArray(children
浏览 1提问于2020-04-17得票数 0
1回答
我有一个Modal对话框组件，它接受另一个组件作为内容，并返回一个处理结果的承诺(想法来自here)。如何从内容中提取“时间”状态，以便将其添加到promise链中？ import React from 'react'
import Modal from './Modal'
class Late extends React.Component {
constructor(props) {
super(props);
this.state = {
浏览 15提问于2019-01-23得票数 0
我是新的反应，并试图利用语义-ui-反应。我遵循了安装和的说明，但每次我尝试添加任何语义-ui-react元素时，都会在开发控制台/浏览器中收到以下错误(详细的屏幕截图，并引用下面的链接)：
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件。
检查App的呈现方法。
页面上错误消息的屏幕截图
控制台中错误消息的截图
在导入之后，当我console.log其中一个语义-ui-react元素时，它返回未定义的元素。
删除语义-ui-react元素，但保留JSX可以解决错误。我尝试重新安装Rea
浏览 3提问于2017-11-12得票数 2
回答已采纳
1回答
我正在尝试发布我的React组件库。但是当我安装我的库并在create-react-app中测试它时，我得到了一个错误。
我尝试更改了React组件库的许多模板。例如Rinsejs和create-react-library。但它仍然不起作用。
这是我的存储库。
我通过Npm在create-react-app中安装库，并使用它，如下所示。
import React from "react"
import logo from "./logo.svg"
import Controller from "omni-slide-editor"
import
浏览 75提问于2019-11-04得票数 1
回答已采纳
我经常碰到这个问题，而且已经坚持了很长时间了。我是mbdreact库的新手，我一直在从这个中尝试他们的例子。这给我在调试和理解正在发生的事情方面带来了太多的问题。
问题:
You should not use <Route> or withRouter() outside a <Router>
我可以提取的详细错误跟踪如下：
Uncaught Error: You should not use <Route> or withRouter() outside a <Router>
at invariant (browser.js:34)
浏览 0提问于2019-01-01得票数 2
回答已采纳
我有一个使用typescript和office-ui-fabric的react项目。在简单的中，fabric css是从CDN加载的。
我想把css包含在我的webpack包中。最好的方法是什么？
从node_modules文件夹导入css是可行的。
import "../node_modules/office-ui-fabric-core/dist/css/fabric.min.css";
有没有其他更好的方法将css文件放入包中？
浏览 3提问于2017-02-20得票数 3
我正在尝试通过我的nextJS应用程序使用。然而，当我尝试实际使用它时，我收到了一个问题。我得到了以下信息
无法从error:"./node_modules/react-mapbox-autocomplete/index.css中导入node_modules全局CSS。阅读更多信息：位置: node_modules/react-mapbox-autocomplete/index.js
现在尝试对此做一些研究，我发现NextJS支持在_app.js中从node_modules导入css，我也尝试过。但我仍然收到错误！:(这是我的_app.js：
import Layout from &#
浏览 40提问于2021-02-25得票数 0
使用视频反应库来播放本地mp4视频，我看到有人使用这个函数将选定的视频文件设置为url，他们说它可以工作。我可以选择视频文件，但它似乎不工作，我的播放器仍然是黑色屏幕和不可播放。
输入是您选择文件的位置，然后它运行该函数，然后您从该函数中为播放机使用videoFileURL。
import React, { Component } from "react";
import "./App.css";
import "../node_modules/video-react/dist/video-react.css";
import { Player
浏览 0提问于2019-08-03得票数 3
回答已采纳
1回答
组件im试图从以下位置reRender配置文件组件：
import React from 'react'
import {useContext} from "react"
import { UserNameContext } from '../App'
import PersonIcon from '@mui/icons-material/Person';
import { useNavigate } from 'react-router-dom';
import &
浏览 4提问于2022-03-26得票数 1
1回答
我是怎么打破反应钩规则的？
、、、、
在使用router.query提取URL时，调用这个单一的防火墙文档有问题。
我一直在使用同样的方法，成功地从火药库中获取集合。
唯一的区别是，我不需要下一个路由器来获得该代码的url参数，它只是工作。
这是我的页面..。
import React, { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useQuery } from
浏览 5提问于2022-10-19得票数 -1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
