Как я могу использовать Fela.js для стилизации вложенных элементов (вместо использования <FelaComponent>для каждого элемента, который я хочу стилизовать) - PullRequest
Новая
       22

Как я могу использовать Fela.js для стилизации вложенных элементов (вместо использования <FelaComponent>для каждого элемента, который я хочу стилизовать)

0 голосов
/ 26 июня 2019

Я пытаюсь использовать Fela.js с ReactJS для стилизации css-in-js.поэтому я понял, как использовать и передать ему стиль примерно так: , но проблема в том, что вложенные элементы не заставляют работать "hover" и "@media".

так что это означает, что мне нужно использовать каждый элемент, которому я хочу передать стили.Я думаю, должен быть другой способ сделать это.

Я попробовал это и заставил его работать, кроме части {style.test} div: 

import React from "react";
import ReactDOM from "react-dom";
import { FelaComponent, Provider } from "react-fela";
import { createRenderer } from "fela";
const renderer = createRenderer();

const style = {
  padding: "25px",
  backgroundColor: "rgb(124, 114, 231)",
  fontSize: "20px",
  ":hover": {
    backgroundColor: "green"
  },
  test: {
    color: "red",
    ":hover": {
      color: "green"
    }
  }
};

function App() {
  return (
    <div className="App">
      <h1>Hello MAN</h1>
      <FelaComponent style={style} as="span">
        Whatsup?
        <div style={style.test}
        >How do i setup style here? the FelaComponent dont apply to "children elements",
        so i need to use FelaComponent for every styled element. do you see what i mean?
        </div>
      </FelaComponent>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider renderer={renderer}>
    <App />
  </Provider>,
  rootElement
);

я хочучтобы получить ситуацию, когда у меня есть один объект стилей, и что я могу передавать стили в элементы html следующим образом, и что "hover" и "@media" будут работать:

section.jsx 

const styles = {
  title: {
    color: 'red',
    ':hover': {
      color: 'green'
    }
  },
  ok: {
    background: 'blue',
    ':hover': {
      background: 'red'
    }
  }
}

  renderSection() {
    return (
          <div>
            <div style={styles.title}>
              {'TITLE GOES HERE'}
            </div>
            <div style={styles.content}>{'content goes here'}</div>
            <Button text={'ok'} skin='primary' style={styles.ok} />
          </div>
    )
  }
...