为依赖于道具的 Reason-React 组件创建样式的惯用方法是什么？

Question

学习reason and reason-react, I'm working on a simple “Things 2 Do” app (see source code on GitHub).

我有一个 TodoItem 组件，当项目完成时，它应该以删除线样式呈现。

我尝试通过创建具有多种样式的记录来解决此问题，类似于 CSS 类，一种根样式，一种用于已完成的项目。

type style = {
  root: ReactDOMRe.style,
  completed: ReactDOMRe.style
};

let styles = {
  root: ReactDOMRe.Style.make(), /* add root styles here */
  completed: ReactDOMRe.Style.make(~opacity="0.666", ~textDecoration="line-through", ())
};

如果道具 completed 为真，我将根样式与已完成样式组合，否则我只使用根，如下所示：

let style = styles.root;
let style = item.completed ? ReactDOMRe.Style.combine(style, styles.completed) : style;

这可行，但看起来很笨重，所以我想知道：是否有更优雅的解决方案，例如使用变体和 switch 语句？

为依赖于 props 的 Reason-React 组件创建样式的惯用方法是什么？

这是我的组件的完整代码：

type item = {
  id: int,
  title: string,
  completed: bool
};

type style = {
  root: ReactDOMRe.style,
  completed: ReactDOMRe.style
};

let str = ReasonReact.stringToElement;

let component = ReasonReact.statelessComponent("TodoItem");

let styles = {
  root: ReactDOMRe.Style.make(), /* add root styles here */
  completed: ReactDOMRe.Style.make(~opacity="0.666", ~textDecoration="line-through", ())
};

let make = (~item: item, ~onToggle, _) => {
  ...component,
  render: (_) => {
    let style = styles.root;
    let style = item.completed ? ReactDOMRe.Style.combine(style, styles.completed) : style;
    <div style>
      <input
        _type="checkbox"
        onChange=((_) => onToggle())
        checked=(Js.Boolean.to_js_boolean(item.completed))
      />
      <label> (str(item.title)) </label>
    </div>
  }
};

Answer 1

目前，我设计组件样式的方式还不错。 Reason yet 中并没有真正惯用的方式来设置 React 组件的样式。

Reason 文档 has this to say:

Since CSS-in-JS is all the rage right now, we'll recommend our official pick soon. In the meantime, for inline styles, there's the ReactDOMRe.Style.make API

Answer 2

我认为还没有什么可以称为地道的。该地区正在迅速变化，甚至我对如何改进它也有一些自己的想法，但这或多或少是我现在使用 bs-css:

做的

module Styles = {
  open Css;

  let root = completed => style([
    color(white),
    opacity(completed ? 0.666 : 1.),
    textDecoration(completed ? LineThrough : None)
  ]);
}

...

  render: _self =>
    <div className=Styles.root(item.completed)>
      ...
    </div>

为依赖于道具的 Reason-React 组件创建样式的惯用方法是什么？

What is the idiomatic way to create styles for a Reason-React component that depend on props?

css

reactjs

reason

reason-react