Как передать сложные стили (т.е. таблицы стилей) компонентам React в качестве реквизита?

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
}