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

为了学习和学习，我正在开发一个简单的“Things2Do”应用程序（请参阅）

我有一个TodoItem组件，该组件应该在项目完成后使用strike through样式呈现

我试图通过创建一个具有各种样式的记录来解决这个问题，类似于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", ())
};

如果prop completed为true，我会将root样式与completed样式相结合，否则我只使用root，如下所示：

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

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

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

以下是我的组件的完整代码：

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

类型项={
id:int，
标题：字符串，
已完成：布尔
};
类型样式={
根：ReactDOMRe.style，
已完成：ReactDOMRe.style
};
设str=ReasonReact.stringToElement；
让component=ReasonReact.statelessComponent（“TodoItem”）；
让样式={
root:ReactDOMRe.Style.make（），/*在此处添加根样式*/
已完成：ReactDOMRe.Style.make（~opacity=“0.666”、~textDecoration=“线条通过”、（））
};
让make=（~item:item，~onToggle，)）=>{
…组件，
渲染：（)）=>{
让style=styles.root；
让style=item.completed？ReactDOMRe.style.combine（style，style.completed）：style；
onToggle（））
选中=（Js.Boolean.to_Js_Boolean（item.completed））
/>
（str（项目名称））
}
};

目前，我设计组件样式的方式还可以。目前还没有一种习惯的方式来合理地设计React组件的样式

原因如下：

由于JS中的CSS现在非常流行，我们将很快推荐我们的官方选择。同时，对于内联样式，还有ReactDOMRe.Style.makeAPI

---

我认为还没有什么东西可以被称为惯用语。这一领域正在迅速变化，甚至我自己也有一些关于如何改进的想法，但这或多或少是我现在使用的方法：

模块样式={
开放式Css；
让root=completed=>style([
颜色（白色），
不透明度（完成？0.666:1.），
文本装饰（已完成？线条贯穿：无）
]);
}
...
呈现：_self=>
...