Question

我正在做一个大型的React项目，团队的每个成员都在分别制作组件和样式表。我试图找到常见的元素并重新编写代码，创建可重复使用的组件。目前，每个组件都有一个样式表-SCSS-已编写。

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

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

但是据我了解，这些样式仅适用于该外部div吗？如何传递样式，以便可以使用元素的classNames在组件的结构中进一步对元素进行样式设置？好像我正在传递一个将覆盖默认样式表的新样式表？

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

Answer 1

您想要实现的目标与内联样式（非全局，与实现分离等）的整体思想背道而驰，但是您是正确的，传递了一个style道具并尝试应用它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'
  }
});

这是一项繁琐的工作，但这基本上是您要实现的目标，另一种方法是全局应用主题：

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组件作为道具？

1 个答案: