Javascript React组件样式取决于其父级

对不起，如果这个问题很愚蠢，我是新手

假设我有这样一个组件：

import React from 'react';

import Container from '../Miscellaneous/Container/Container'
import MaskedImgBlock from '../MaskedImgBlock/MaskedImgBlock'

import HeaderImg from 'assets/img/header/header-img.jpg'

import styles from './Header.module.scss'

const header = (props) => {

  return(
    <header className={styles.mainHeader}>
      <Container>
        <div className={styles.mainHeader_inner}>

          ... {/* some other code here */}

          <MaskedImgBlock 
            src={HeaderImg}
            alt="Team members photo"/>

        </div>
      </Container>
    </header>
  )
};

export default header;

import React from 'react';

import styles from './MaskedImgBlock.module.scss'

const maskedImgBlock = ({ src, alt }) => {

  return (
    <div className={styles.imgBlock}>
      <div className={styles.imgBlock_clipped}>
        <img className={styles.imgBlock_img}
             src={src}
             alt={alt} />
      </div>
    </div>
)};

export default maskedImgBlock; 

这个MaskedImgBlock组件我想在我的应用程序的多个组件中使用，它必须保持其结构和大多数样式，但它的内部元素的一些样式必须根据组件的位置进行更改

例如，当此组件位于页眉组件内部时，其一个内部div必须具有绿色背景色，如果它位于页脚组件内部，则其他内部div必须具有黄色背景色

---

我怎样才能以最好的方式达到这个效果

与React的Material UI框架中所做的类似，您可以为MaskedImgBlock组件引入一个新的道具，如以下示例所示：

常数MaskedImgBlock={ src， 中高音， 类={} } => { 常数{ 根=， imgwraper=， img=， }=类 回来

---

与React的Material UI框架中所做的类似，您可以为MaskedImgBlock组件引入一个新的道具，如以下示例所示：

常数MaskedImgBlock={ src， 中高音， 类={} } => { 常数{ 根=， imgwraper=， img=， }=类 回来

---

如何定义父组件中MaskedImgBlock类的样式

您在MaskedImgBlock中使用css模块，因此它的类名将根据您的样式/css/或*其他加载程序配置生成

若您需要两种不同的表示，最好向MaskedImgBlock组件添加一些道具，并从类似父级的位置对其进行路径设置

import React from 'react';

import Container from '../Miscellaneous/Container/Container'
import MaskedImgBlock from '../MaskedImgBlock/MaskedImgBlock'

import HeaderImg from 'assets/img/header/header-img.jpg'

import styles from './Header.module.scss'

const header = (props) => {

  return(
    <header className={styles.mainHeader}>
      <Container>
        <div className={styles.mainHeader_inner}>

          ... {/* some other code here */}

          <MaskedImgBlock 
            theme={'green'}
            src={HeaderImg}
            alt="Team members photo"/>

        </div>
      </Container>
    </header>
  )
};

export default header;

还有新的面具

---

如何定义父组件中MaskedImgBlock类的样式

您在MaskedImgBlock中使用css模块，因此它的类名将根据您的样式/css/或*其他加载程序配置生成

若您需要两种不同的表示，最好向MaskedImgBlock组件添加一些道具，并从类似父级的位置对其进行路径设置

import React from 'react';

import Container from '../Miscellaneous/Container/Container'
import MaskedImgBlock from '../MaskedImgBlock/MaskedImgBlock'

import HeaderImg from 'assets/img/header/header-img.jpg'

import styles from './Header.module.scss'

const header = (props) => {

  return(
    <header className={styles.mainHeader}>
      <Container>
        <div className={styles.mainHeader_inner}>

          ... {/* some other code here */}

          <MaskedImgBlock 
            theme={'green'}
            src={HeaderImg}
            alt="Team members photo"/>

        </div>
      </Container>
    </header>
  )
};

export default header;

还有新的面具

---

当你谈论内部元素时，你谈论的是将img元素包装在MaskedImgBlock中的div？是的，还有img标记本身。在我的应用程序中，我需要根据img在MaskedImgBlock中的位置将不同的CSS掩码应用到img，以及一些其他属性来调整这些掩码，同时一些divs属性也将根据需要更改根据MaskedImgBlock的位置，您可以将一个类名作为道具传递给MaskedImgBlock组件，并根据您调用该组件的位置传递一个不同的类名作为道具。@MathisWitte是的，我可以，但如果我有10个不同版本的此块，我将在MaskedImgBlock样式表中应用所有这些版本的样式，我希望我希望可以在父样式文件中以某种方式应用这些版本样式。就像本例中的标题样式表一样，因为只有当MaskedImgBlock是标题块的子元素时，这些独特的样式才相关。当您谈论内部元素时，您指的是将img元素包装在MaskedImgBlock？y中的两个divep和img标记本身。在我的应用程序中，我需要根据MaskedImgBlock内的img的位置对其应用不同的CSS掩码，以及一些其他属性来调整这些掩码，并且一些divs属性将根据MaskedImgBlock位置进行更改。您可以将类名作为道具传递给MaskedImgBlock组件并传递dif根据您调用组件的位置，使用不同的类名称作为道具。@MathisWitte是的，我可以，但是如果我有这个块的10个不同版本，我将在MaskedImgBlock样式表中应用所有这些版本样式，我希望可以在父级样式文件中以某种方式应用这些版本样式。就像在Header样式表中一样在本例中，仅当MaskedImgBlock是头块的子项时，这些唯一样式才相关

import React from 'react';

import styles from './MaskedImgBlock.module.scss'

const maskedImgBlock = ({ src, alt, className = '' }) => {

  return (
    <div className={`${styles.imgBlock} ${className}`}>
      <div className={styles.imgBlock_clipped}>
        <img className={styles.imgBlock_img}
             src={src}
             alt={alt} />
      </div>
    </div>
)};

export default maskedImgBlock;