React Native 组件覆盖样式 "leaking"

Question

我正在尝试使用 Atomic Design Methodology 构建我自己的特定于我的 React Native 应用程序的组件库，所以我在单个文件中有一些小组件，如段落、标题、换行、按钮、副标题等称为“原子”。我可以像这样将它们导入我的其他组件中：

import { Paragraph, Title, Wrap, Button, Subtitle } from "../Atoms";

我正在使用 tailwind-react-native-classnames. It's a great package using Tailwind CSS 构建它们，其中包含许多有用的功能，例如平台前缀和暗模式支持。

现在，有时我需要对这些组件进行独特的样式更改，所以我有一个样式道具可以将样式 Object 混合到一个，它的工作原理如下：

 <Subtitle style={tw`pt-20`}>Some Text</Subtitle>

并且在组件中：

 const Subtitle = ({ style, children }) => (
  <Text style={Object.assign(tw`text-xl mb-3 text-octonary dark:text-white`, style)}>
    {children}
  </Text>
);

效果很好，任何样式都可以被覆盖，使用起来很直观，给我很大的自由度。但这就是问题所在，更改（不一致，而不是每个组件）似乎会影响其他 Screens 上的相同组件。因此，在上面的示例中，tw`pt-20` 转换为 paddingTop: 5rem 并将其应用于其他地方，其他 Screens，具有相同的组件，甚至不应该应用此样式。

为什么会这样？它以某种方式兑现了吗？我该如何解决？

提前感谢任何help/suggestions。

Answer 1

感谢 @Abe 我找到了解决方案我尝试使用 tw.style()。所以不是这个：

const Subtitle = ({ style, children }) => (
  <Text
    style={Object.assign(tw`text-xl mb-3 text-octonary dark:text-white`, style)}
  >
    {children}
  </Text>
);

我这样做了：

const Subtitle = ({ style, children }) => (
  <Text
    style={tw.style(
      "text-xl",
      "mb-3",
      "text-octonary",
      "dark:text-white",
      style
    )}
  >
    {children}
  </Text>
);

它不像正常的 Tailwind CSS 因为每个 class 都需要单独的引号并且用逗号分隔，但它有效！但后来我更进一步，做了这个：

const Subtitle = ({ style, children }) => {
  const s = tw`text-xl mb-3 text-octonary dark:text-white`;
  return <Text style={tw.style(s, style)}>{children}</Text>;
};

它更紧凑，我可以编写 vanilla tailwind 而不会“泄漏”。所以 win-win-win!

React Native 组件覆盖样式 "leaking"

React Native Components Override styles "leaking"

reactjs

react-native

atomic-design

tailwind-css