如何将复杂的样式（即样式表）传递给React组件作为道具？

Question

I'm working on a large React project where each member of the team has been making components and stylesheets separately. I'm trying to find the common elements and re-write the code, creating re-usable components. At the moment each of these components has a stylesheet -- SCSS -- already written.

What I'd like to do is be able to pass styles to the component so that it can be customised (somewhat) in different locations. I know how to do this for the top-level HTML element in the component

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

but as I understand it, these styles will only apply to this outer div? How can I pass styles such that I can re-style elements further down in the component's structure, using their classNames ? As if I were passing a new stylesheet that would override the default stylesheet?

I suppose I could pass a number of style objects, but that seems cumbersome -- I'm wondering if there is a simpler way?

Answer 1

What you are trying to achieve kinda goes against the whole idea of inline styles (non-global, non-separated from implementation, etc), however you are right, passing a style prop and trying to apply it to a div will inmediatly result to only the parent having the styles applied.

One suggestion would be to merge the component styles with the props, ex:

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'
  }
});

It is tedious work, but it is basically what you are trying to achieve, another approach is having theming globally applied:

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
}