Javascript 如何传递复杂样式（即样式表）以将组件作为道具进行反应？

我正在从事一个大型React项目，团队的每个成员都在分别制作组件和样式表。我试图找到公共元素并重新编写代码，创建可重用的组件。目前，这些组件中的每一个都已经编写了一个样式表——SCS

我想做的是能够将样式传递给组件，以便它可以在不同的位置进行定制（有些）。我知道如何对组件中的顶级HTML元素执行此操作

export default class BoxWithSliderAndChevron extends Component {
  render() {
    const {
      props: {
        styles
      },
    } = this;
 return (
      <div className="BoxWithSliderAndChevron-main" style={styles}>

导出默认类BoxWithSlideandChevron扩展组件{
render（）{
常数{
道具：{
风格
},
}=这个；
返回(

但据我所知，这些样式将只应用于这个外部div？我如何传递样式，以便可以使用它们的

类名

，在组件结构的更底层重新设置元素的样式？就好像我传递的是一个新样式表，它将覆盖默认样式表一样

---

我想我可以传递许多样式对象，但这似乎很麻烦——我想知道是否有更简单的方法？

您试图实现的内容与内联样式（非全局、非独立于实现等）的整体思想相违背，但是您是对的，传递一个

样式

道具并尝试将其应用于div将只在中间导致父级应用样式

建议将组件样式与道具合并，例如：

import { StyleSheet } from 'react-native';

class Foo extends React.PureComponent {
  render() {
    return (
      <div style={StyleSheet.merge([styles.parentStyle, styles.parentStyle])}>
        <div style={StyleSheet.merge([styles.childStyle, styles.childStyle])}>
      </div>
    )
  }
}

const styles = StyleSheet.create({
    parentStyle: {
    backgroundColor: 'red'
  },
  childStyle: {
    backgroundColor: 'blue'
  }
});

从'react native'导入{StyleSheet}；
类Foo扩展了React.PureComponent{
render（）{
返回(
)
}
}
const styles=StyleSheet.create({
父样式：{
背景颜色：“红色”
},
儿童风格：{
背景颜色：“蓝色”
}
});

这是一项乏味的工作，但它基本上是您想要实现的，另一种方法是在全球范围内应用主题：

import { StyleSheet } from 'react-native';
import { t } from '../theming'; // <- You switch themes on runtime

class Foo extends React.PureComponent {
  render() {
    return (
      <div style={StyleSheet.merge([styles.parentStyle, t().parentStyle])}>
        <div style={StyleSheet.merge([styles.childStyle, t().childStyle])}/>
      </div>
    )
  }
}

const styles = StyleSheet.create({
    parentStyle: {
    backgroundColor: 'red'
  },
  childStyle: {
    backgroundColor: 'blue'
  }
});



/// Theming file would be something like:
// PSEUDO IMPLEMENTATION
import theme1 from 'theme1.json';
import theme2 from 'theme2.json';

availableThemes = {
  theme1,
  theme2
}

currentTheme = availableThemes.theme1

function setTheme(theme) {
  currentTheme = availableThemes[theme]
}

export function t() {
  return current theme
}

从'react native'导入{StyleSheet}；
从“../theming”导入{t}//