我已经决定在一个新的Reaction项目中try StyleX.我通常用style-components来构建风格,但我发现StyleX的简单性非常吸引人.

我已经多次阅读了StyleX简短的文档和Thinking in StyleX 部分.然而,我被困在两个基本点上:

  1. 在一个多语言网站中,我如何为不同的语言定义不同的风格,如directionfontFamily.这是一个Theme的问题,还是更多的是关于定义风格dynamically?我是否应该为语言创建一个主题,为 colored颜色 和其他设计元素创建另一个主题,并将两个主题都应用为explained here

  2. 当使用StyleX构建组件库时,每个组件都应该期望接收"自定义样式"和"主题"作为props 吗?

推荐答案

CSS使用逻辑样式属性支持LTR和RTL语言.StyleX支持它们.不要使用any种带有"左"或"右"字的样式.例如,使用marginInlineStartmarginInlineEnd.这将使您的样式在所有语言中都能正常工作,而不需要单独的样式.

接下来,direction实际上是一个css属性,因此您可以根据页面上当前活动的语言应用direction: ‘ltr’direction: ‘rtl’.当然,您还应该设置lang属性.

如果您不能直接在html标签上应用样式,使用@Damascus解释的效果是一个有效的解决方案.

如果您try 按语言更改主题,应用多个主题也是正确的解决方案.

当使用StyleX构建组件库时,每个组件都应该期望接收"自定义样式"和"主题"作为props 吗?

这取决于您的设计有多严格.如果一个组件可以定制,它应该接受样式.不过,在大多数情况下接受themeprops 可能没有什么用处,因为主题无论如何都是继承的,并且可以应用于容器元素.

只有在您可能合理地想要更改活动主题的大型"容器"组件上,主题props 才有意义.

总体而言,你的直觉是正确的.请随时在StyleX repo上创建讨论帖子,并提出进一步的问题.

Reactjs相关问答推荐

构建next.js项目时状态不变,但在dev服务器中

Next.js:提交表单时状态尚未就绪

Javascript - 正则表达式不适用于 MAC OS - 编码?

React router v5 仅在生产中不适用于嵌套路由

这个简单的React组件为什么会多次渲染?

CORS策略:对预检请求的响应未通过访问控制判断:没有Access-Control-Allow-Origin

为什么这个 React 组件会导致无限渲染?

部署到github pages时请求路径错误

未捕获的类型错误:useSelector 不是函数

如何通过onpress on view in react native flatlist来降低和增加特定视图的高度?

自动重新获取不起作用 - RTK 查询

ReactJS:useMemo 钩子修复了我的无限重新渲染问题而不是 useEffect

错误:无效挂钩调用.钩子只能在函数组件的主体内部调用.使用 next/router 时

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x?

如何在自定义 JSX 元素上声明属性?

.filter() 函数在删除函数中创建循环 - React

react 路由路由加载器不适用于嵌套组件

单击当前子div时如何更改p标签的图像和样式?react

如何跟踪 dexie UseLiveQuery 是否完成

React 似乎在触发另一个组件时重新渲染了错误的组件