如何使用sass在父react组件中重写子css类
使用Sass在父React组件中重写子CSS类的方法如下：
- 首先，确保你的项目中已经安装并配置了Sass。可以通过运行命令
npm install node-sass --save来安装Sass。 - 在父组件的CSS文件中，使用Sass的
@use规则导入子组件的CSS文件。例如，如果子组件的CSS文件名为childComponent.scss，则可以在父组件的CSS文件中添加以下代码：
@use './childComponent.scss' as child;- 然后，可以使用
@extend指令在父组件中重写子组件的CSS类。例如，如果子组件中有一个名为.child-class的类，你可以在父组件的CSS文件中使用以下代码重写该类：
.parent-class {
@extend child.child-class;
// 添加父组件自定义样式
// ...
}这将使父组件继承子组件的样式，并且还可以添加父组件自定义的样式。
- 最后，确保在React组件中引入正确的CSS文件。在父组件的JavaScript文件中，通过
import语句引入父组件的CSS文件：
import './parentComponent.scss';这样，当父组件渲染时，它将应用包含重写样式的CSS文件。
通过以上步骤，你可以使用Sass在父React组件中重写子CSS类。这种方法允许你使用Sass的强大功能，如变量、嵌套、混合等，来管理和扩展CSS样式。同时，你还可以根据需要在父组件中添加自定义样式。
对于腾讯云相关产品和产品介绍链接地址，由于禁止提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等品牌，建议你查阅腾讯云官方文档或咨询腾讯云官方客服以获取相关信息。
相关·内容
1回答
我将React与SASS和CSS模块一起使用。如何在不传递新的ClassName或类似的东西的情况下样式子组件。对于Ex.
我想要在子组件上定位或做一些样式，而不需要给出特定的类，就像你做p span一样，所有的跨度都是子组件，我只想做一些样式，引用父组件中的所有子组件。但是当这个类被编译时，我不知道如何引用这些孩子。
//ParentComponent.js
Import Styles from 'ParentComponent.scss';
Import Child from 'ChildComponent';
Import ChildB from '
浏览 6提问于2018-06-08得票数 16
1回答
我使用webpack并有一个简单的react应用程序，其中我想使用组件。当我想在我的应用程序中使用这个组件时，我会得到错误：
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of anot
浏览 1提问于2015-09-11得票数 1
回答已采纳
我正在做react项目，因为我有一个父组件，那就是App.js。对于该App.js，Child.js是子组件。在Child.js中，我放置了一个图标并应用样式。
现在我想用不同的背景色，不同的图标，不同的边框颜色重用Child.js组件。
如何在react中实现这一点
这是App.js
import React from 'react';
import './App.css';
import Child from './Child/Child'
function App() {
return (
<div className=
浏览 1提问于2019-12-07得票数 1
我想将组件分为baseUI one和styled：
例如：MyComponent.jsx
export default class MyComponent extends React.Component {
...
...
render() {
const { wrapperClassName, className, childClassName } = this.props;
return (
<div className={wrapperClassName>
<div className={className /&g
浏览 0提问于2018-06-13得票数 1
回答已采纳
4回答
首先，我要指出，我不需要得到现成的解决办法。我只是需要一些指导如何正确地做这件事。
我有这样的父组件
import React from "react";
import Navbar from "./components/Navigation.js";
import Start from "./components/Start.js";
import Generator from "./components/Generator.js";
import Footer from "./components/Footer.js&
浏览 4提问于2020-12-28得票数 0
回答已采纳
我使用了带有嵌入式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
回答已采纳
我想我不知所措..。我不能对这个问题全神贯注。
我如何初始化组件"cssCompiler“中的变量"CodePreview”，而不对其进行初始化？如果我把它放进useEffect im中，违反了React规则
CodePreview
import SassCompiler from './compiler/sass_compiler';
const CodePreview = ({ codeContent, saveSnippet }) => {
//Init with default values
const [css, setCss]
浏览 3提问于2022-01-07得票数 0
2回答
我将如何使用样式组件来设计类似于react-datepicker的样式？datepicker库看起来像是使用了某种类型的边界元样式(下面的截图)，我通常只使用它们提供的类名和使用Sass的样式。但是，我如何针对那些带有样式组件的类名呢？这可能吗？
浏览 4提问于2017-07-25得票数 9
回答已采纳
2回答
我试图从子组件向父组件中的数组中添加数字。当我试图仅仅根据一个随机数发送数据时，数字似乎被混淆了。(我试着买东西的游戏熄灯了)
家长：
import "./App.css";
import Square from "./Square";
import react, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
lightNums: [],
浏览 4提问于2021-10-28得票数 1
回答已采纳
1回答
我正在用Dart SASS构建一个React应用程序。事情通常进展顺利，我特别欣赏每个组件的样式是如何与该组件隔离的--即。ComponentName.module.scss
但我刚刚构建了一个新的Modal组件，它仅仅是流行的通过npm安装的react-modal组件的包装器。
理想情况下，我希望能够传递一个className字符串，该字符串仅仅是对父组件中SCSS类的引用，并让它覆盖Modal.jsx中的默认样式。
示例:我有一个名为SignIn.jsx的组件。它有一个Forgot Password链接，当单击该链接时，显示一个允许用户输入电子邮件地址的模式。理想的方法是能够在SignIn
浏览 2提问于2022-07-15得票数 0
我在我的项目中使用物质用户界面。我想知道在不使用MUI主题的情况下覆盖react组件中的CSS的最佳方法。
浏览 13提问于2022-11-22得票数 0
1回答
如何在父组件中定义样式，然后将其传递给子组件？
<style>
.teststyle {
background-color: red;
width: 100px;
}
</style>
我想，如果我不使用作用域的话，.teststyle对孩子是可用的，但是它对我没有用。
我可以传递在v-bind:style命令中使用的样式，使用道具无法找到传递(或提供)用于v-bind:class的方法。
子组件供许多父组件重用，每个父组件具有不同的样式/类属性，每个属性具有不同的属性。
在一个例子中，子组件是一个通用表，它需要诸如列宽、单元格颜色等内
浏览 0提问于2018-08-17得票数 2
1回答
我想实现子程序的排序功能，其中道具是通过一个axios调用从父函数传入的--我应该吗？
在子useState中存储道具
从道具传入父setState来实现这一点？
假设我不需要父母重新排序，我的想法是1可能更有利-只是我不确定在setState中存储道具是一种常见的模式。
第一个案例() -在子useState中存储道具
父母jsx
import { useEffect, useRef, useState } from "react";
import "./styles.css";
import Child from "./Child&#
浏览 4提问于2022-05-22得票数 0
1回答
我想把一个图像作为背景图像，像视频组件，登录组件，底部组件浮动在它上面的多个组件。react上的代码模式是什么，因为我是新手。所有的视频组件和其他组件都放在这里。代码如下： import React from 'react'
import Video from './Video.js'
import './Home.css'
import logo from './images/background.png'
function Home() {
return (
<div
浏览 24提问于2020-11-03得票数 0
1回答
在顶层组件的样式块中，我定义了一个/deep/ css类，用于设置将出现在其ng-content中的任何项的边距。如何才能使css类具有优先权-即使子组件应用其自己css类并定义了不同的页边距。
例如：
ParentComponent.ts：
@Component({
selector: 'my-parent',
styles: [`
/deep/ .child-item { /* I WANT THIS TO TAKE PRECEDENCE */
margin-right: 10px;
margi
浏览 0提问于2016-10-07得票数 0
我有一个问题，我想从子组件中获取值并在父组件中使用它。
这是父组件，我通过props将一个值i传递给它的子组件，我想要取回它，那么我该如何实现呢？
import React, { Component } from 'react'
import { render } from 'react-dom'
import {Row} from 'react-bootstrap';
import Rectangle from './Rectangle.js';
import '../App.css';
class Rect
浏览 0提问于2017-05-01得票数 2
我有两个组件，一个父组件及其子组件。
在父组件中，我存储“active”的状态，该状态包含活动子组件的id。我想要做的是有一个handleClick函数，它将被单击的子组件的id与'active‘的值进行比较，如果它是相同的，或者是不同的，我希望它更新子组件的html className以获得某种样式效果(这可能包括一些动画)。
问题:有没有一种方法可以针对特定子元素的className并对其进行更新？
相反，当将'active‘子组件的id存储在父组件的状态时，在子组件中处理这个函数更好吗？
如果我希望基于子组件的className从一个className到另一个classN
浏览 3提问于2020-12-30得票数 2
回答已采纳
我正在使用Sass开发一个JS/CSS库。我想为我的用户提供直接将我的Sass导入到他们的项目并自己编译的选项，并选择修改一些变量来改变所包含的CSS动画的行为。
然而，我对Sass相对来说是个新手，我不知道该怎么做。Sass用户通常希望如何导入和修改Sass变量(比如Bootstrap或Bulma)？我是否应该使用使用!default的关键字？
浏览 1提问于2016-08-12得票数 0
回答已采纳
我想在类组件中使用navigation，它不是屏幕组件，也不会通过props自动访问navigation，所以我必须将导航作为props传递给它。但是父组件是一个功能组件，我在其中使用了navigation挂钩。但是，如何在子组件中使用navigation？
ParentComponent.js
import React from 'react';
import {View , TouchableOpacity} from 'react-native';
import {useNavigation} from 'react-navigation-hook
浏览 2提问于2020-07-24得票数 0
回答已采纳
我有一个带有img & h5元素的子组件，我想更改每个组件中的图像和标题内容，而不需要重写它的全部代码。
父组件
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Child from "./services";
const Navbar = () => {
return (
<div className="d-flex flex-row justify-content-center"
浏览 11提问于2022-04-05得票数 0
回答已采纳
我在做Reactjs天气项目。在提交后，我将在子组件(Form.js)的方法中获取值，并且需要在父组件(App.js)中获得该值。如何得到这个价值？
App.js文件(父组件)
getWeather = async (e) => {
e.preventDefault();
}
Form.js文件(子组件)
import React, { Component } from 'react'
import Background from '../video/rain_drop2.jpg';
import { ToastContainer, toast
浏览 0提问于2019-10-28得票数 1
回答已采纳
因此，我正在为联系人表单制作一个ReactJS组件。现在，我想要创建一个方法，从JSX中的输入中获取值，然后在另一个文件中获取该方法从组件外部返回的值。这个是可能的吗？
我的组件文件：
//Inporting React.
import React from 'react';
//Creating the contactForm Component
class ContactForm extends React.Component{
render(){
return (
<form onSubmit={this.props
浏览 2提问于2022-05-13得票数 0
回答已采纳
我有一些导航，这是一个react组件。然后，我在我的页面下面的内容中有一个链接。单击链接时，我想向导航组件添加一个CSS类。
它们是完全独立的组件。
在过去，我可能会使用jQuery来定位导航，然后使用addClass()函数。我正在努力在React中弄清楚这一点。
浏览 0提问于2018-01-18得票数 0
因此，我有一个Operations.js组件，当父组件(ParamsForm.js)中的特定按钮被切换时，它会被呈现。现在，我想要的是，当父组件中的表单被提交时，我希望父组件表单字段的数据以及子组件表单字段的数据能够登录到控制台上。有什么办法可以做到这一点吗？
ParamsForm.js
import React, { useState, useEffect } from 'react'
import { Form } from 'react-bootstrap'
import styles from '../style.module.css'
浏览 1提问于2022-06-25得票数 0
回答已采纳
3回答
假设我有一个React类。这不是我正在渲染的主要组件。如何将我在此处设置的状态向上传递给父组件。
class Player extends React.Component {
constructor(props) {
super(props);
this.state = {
playerOneName: ''
}
this.selectPlayerOne = this.selectPlayerOne.bind(this);
}
selectPlayerOne
浏览 8提问于2017-09-29得票数 0
我在读“反应”的16个特征。我坚持下面的观点。请各位澄清以下几点。
setState回调(第二个参数)现在在componentDidMount / componentDidUpdate之后立即触发，而不是在所有组件呈现之后触发。
当下面的代码在react的两个版本中执行时，会有什么不同，即< 16和16。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Com
浏览 2提问于2017-11-18得票数 4
2回答
我有一个需求，我不确定是否可以使用Rollup (或使用Webpack?)
我已经编写了一个React组件库。每个组件都导入它的样式表。就像这样
import "./button.scss"
export default function Button() {
...
}
现在，这些scss文件使用了我想在全局文件中定义的所有类型的sass变量。我希望我的库的使用者能够像这样导入Button：
import { Button } from "mylib"或者更好：import Button from "mylib/button"，并且只将But
浏览 0提问于2019-07-30得票数 3
4回答
我刚开始学习React & React ，并尽我最大的努力把它学好。在学习过程中，我学习了道具和state，但是这里有一件事让我感到困惑，那就是、父组件、和子组件。
当我们在React或React 中创建组件时，它是这样创建的：
export default class myApp extends React.Component{
render(){
return(
// Do something ...
);
}
}
就是这样。那么，为什么人们会说父组件和子组件等等。是React.Component是父组件还是m
浏览 3提问于2018-10-03得票数 3
回答已采纳
我有一个简单的父-子组件结构，并想知道为什么父组件重新呈现会导致子组件再次呈现，这是默认行为吗？以及如何预防呢？
下面是我的代码片段-
import "./App.css";
import Library from "./library/Library";
import { useState } from "react";
import LibraryParent from "./library/LibraryParent";
function App() {
const [name, setname] = useState
浏览 1提问于2022-10-21得票数 0
回答已采纳
这是我的主要部分类，所有到链接的路线都保留在这里。
export default class Section extends React.Component {
render() {
return (
<div style={{backgroundColor:"white"}}>
<Routes>
<Route path="/" element={<Home/>} />
浏览 5提问于2020-11-11得票数 32
回答已采纳
3回答
我创建了组件并对其进行了样式设置(使用sass)：
const WidgetCard = (props) => {
return (
<div className={style["widget-card"]}>
{props.children}
</div>
)
}
现在，我在我的小部件中使用这个组件：
const TasksWidget = () => {
return (
<WidgetCard>
<p>SOME AWESOME CONTENT</p
浏览 1提问于2020-06-27得票数 0
回答已采纳
我试着用不同的图像制作一个网格，这个想法是它会在对象中循环并形成网格，但是它根本不起作用。
这些对象是：
export const Projects = [
{
id: 1,
name: 'Site 1',
tech: [
'HTML',
'CSS',
'SASS',
'React'
],
description: 'Lorem',
image: './assets/cv.svg'
浏览 0提问于2019-11-07得票数 0
回答已采纳
我们正开始进行一个项目，作为3名学生谁是新的反应。我想分拆代码，这样每个人都可以同时处理一些事情。但是，当我试图使用App.js中的图标-bar.js中的状态时，我得到了错误消息。App.js
import React, {Component} from 'react';
import './App.css';
import IconBar from './components/icon-bar';
import Events from './components/events';
function App() {
retu
浏览 3提问于2020-05-09得票数 1
回答已采纳
，正如它在标题中所说的，我似乎不能使用钩子
我知道你们中的一些人会试图告诉我这是一个副本，但在我所见过的所有问题中，似乎没有人会问，使用导入的功能组件(我试图呈现的组件)的正确方式是什么。
import React from 'react';
import { hot } from 'react-hot-loader';
import Playground from '../playground/index';
class App extends React.Component {
render() {
Playground
浏览 2提问于2019-03-09得票数 0
回答已采纳
嗨，我正在做我的项目中的一个React项目，一个按钮来了很多次。因此，我为button创建了一个组件，并且在我获得按钮的任何地方重用该组件。现在的问题是，当我尝试将onClick函数应用于该按钮组件时，我的函数不工作，因此请帮助我解决此问题。 这是按钮组件Button.js import React from "react";
import "./Button.css";
const Button = () => {
return (
<div>
<button className="btn btn-p
浏览 28提问于2021-07-12得票数 0
回答已采纳
2回答
在我的React应用程序中，我把内联JS样式和CSS类混在了一起。我决定把所有东西都拆分成CSS模块，这样我就可以使用它们了：
import styles from './ImageTextOption.module.css'
并像使用JS对象一样使用它们。但是，现在样式不会从父元素级联(不是在同一模块中定义的)。我有类似于.selected .option-text的东西，即使我在外部有selected类，因为option-text已更改为唯一的名称，所以它与selected元素中的option-text不匹配。使用CSS模块，让它再次匹配的正确方法是什么？
浏览 1提问于2020-03-03得票数 2
我在我的Numbers组件中有一个函数，它应该返回状态，但是它返回object，object我看不到我做错了什么？我用数字写了一个函数，它在我的应用组件中返回另一个函数！ import React, { Component } from 'react';
import Numbers from './Numbers'
import './App.css';
class App extends Component {
constructor(props){
super()
this.state={
calcVal
浏览 2提问于2018-12-31得票数 0
1回答
我有我所说的父组件。这是一种模式。我试图从一个子组件(即ShippingBlock )中更新一个变量。我正在尝试更新shippingMethod。
import React from 'react';
import "./Checkout.scss"
import AddressBlock from './AddressBlock';
import PaymentBlock from './PaymentBlock';
import ShippingBlock from './ShippingBlock';
imp
浏览 3提问于2021-10-30得票数 0
回答已采纳
我刚接触typescript，想知道如何将属性从我的类组件传递到父类。 我的子类看起来像这样： import React from "react";
type Props = {
startTimeInSeconds: number;
}
type State = {
timeRemainingInSeconds: number;
}
export default class Child extends React.Component<Props, State>{
private timer: any;
constructor(props: Pr
浏览 16提问于2021-06-18得票数 0
回答已采纳
4回答
我有一个屏幕，用户需要在游戏开始前等待几秒钟。在此阶段，react组件需要显示使用某个游戏id加入游戏的玩家的编号。当新用户加入屏幕时，如何更新老用户的屏幕？如何在另一个用户触发事件时呈现组件，并且此更改反映在所有user screens.thank you中。
用户-活动-反应组件-注释
用户A -->登录-> <<用户A加入了从计算机A加入的>>用户A
用户B -->登录-> <<用户A，B加入了从计算B加入的>>用户B
用户C -->登录-> <<用户A，B，C从计算机X加入>>
浏览 0提问于2021-01-26得票数 0
下面的两个分派器都不会出现在子程序中的props对象中(this.props只显示我传入的"Hi“字符串)。
如果我只是在App.js父组件中使用它们(作为this.props.<dispatcher()>，它们可以工作)。
// App.js
import React, { Component } from 'react';
import './App.css';
import SelectDonation from './components/SelectDonation';
import {connect}
浏览 0提问于2018-11-20得票数 0
回答已采纳
我被指派将现有的CSS代码重写为SASS。这是我第一次接触SASS，还是个初学者。
所以，我开始的第一件事就是把所有css文件合并到一个文件中。现在，我正在研究它，并尝试将事物分离到不同的.scss文件中。
我已经按照"7-1“模式来布局我的SASS文件夹的架构，该模式由7个文件夹组成:摘要、基础、布局、模块、页面、主题和供应商。到目前一切尚好。
在将我的CSS分离成不同的文件的过程中，我遇到了一个在google上找不到答案的问题：
假设我有两个CSS文件- main.css和admin.css。在main.css中定义了一个类：
.first-line {
padding-b
浏览 0提问于2019-05-19得票数 0
回答已采纳
2回答
我在Codeacademy上了React.JS课程。这个问题来自React.JS第二部分。我正在学习编程模式，但我不能理解这个模式是如何工作的
代码：
Parent.js
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');
var Parent = React.createClass({
getInitialState: function () {
return { name: '
浏览 7提问于2017-06-14得票数 1
1回答
新手问题:构建购物车，我在模式中有一个表单。
submit按钮是模式的按钮(在form标记之外)，但似乎是将表单发送到handleOnSubmit处理程序。但是，除了关闭模式之外，我无法更新productBought和productName状态值。
理想情况下，我希望将basket[]内容(来自InputList类)推送到父类(AsyncAwaitLocalhost)中的一个新数组中，之后我可以将整个购买提交给一个API。
refs已被弃用，各种其他类型的共享数据也让我失望。我面临的挑战是：
(i)如何将篮子对象的推送共享给等待的父状态对象？以及(ii)在控制台记录表单对象后，如何提交表单？
浏览 4提问于2021-07-08得票数 0
1回答
当我使用以下语法时，我的样式无法加载
import '../styles/some-component.scss';
但是当我像这样使用模块时，它们将会加载(这是有道理的，因为我已经将css-loader modules选项设置为true)：
import '../styles/some-component.scss';
const className = styles.panel;
// etc...
为了扩展以上内容，我将样式加载到React组件中，如下所示：
import React from 'react';
import '..
浏览 10提问于2017-02-18得票数 1
我正在学习反应，我在试图阅读我的道具在一个孩子的组成部分时遇到了问题。
子部分是：
const HelloWorldApp = ( props ) => {
console.log(props);
return (<>
<h2> {props} </h2>
</>
);
}
export default HelloWorldApp;
家长是：
import React from 'react';
import {createRoot} from 'react-dom/client'
浏览 4提问于2022-08-12得票数 0
如何在加载react应用程序时将属性值从子组件发送到父组件？我有一个名为app.js的父组件，它呈现一个包含JSON组件的主组件。加载react应用程序时，我的属性JSONValue (在app.js中定义)保存一个空字符串。当加载react应用程序时，父组件中的JSONValue应该包含已经在子JSON组件中定义的值。如何在初始呈现时将这些值从JSON组件发送到应用程序组件？
我现在唯一能做到这一点的方法就是更改react app --> json组件中的值。然后，它将值从子级发送到父级。
因此: JSONValue的值是在JSON组件中定义的，只有当JSON组件发生变化时，才会应用于
浏览 14提问于2019-07-12得票数 1
问题: 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
我是新来的。
我需要改变点击按钮的整个视图。
为此，我需要从子组件中更新父组件的状态。
就像我们做的会话变量一样。你们知道吗那就帮帮我吧。
提前谢谢。
这是我的密码：
App.jsx
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
let RedirectTo = this.state.page;
let RenderPage;
switch (RedirectTo) {
case 'component':
浏览 6提问于2017-05-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
