我正在尝试使用Atomic Design Methodology为我的 React Native 应用程序构建自己的组件库，因此我在一个名为“Atoms”的文件中包含了段落、标题、换行、按钮、副标题等小组件。我可以将它们导入我的其他组件中，如下所示：
import { Paragraph, Title, Wrap, Button, Subtitle } from "../Atoms";
我正在使用tailwind-react-native-classnames构建它们。这是一个使用Tailwind CSS的很棒的包，具有许多有用的功能，例如平台前缀和暗模式支持。
现在，有时我需要对这些组件进行独特的样式更改，所以我有一个样式道具将样式对象混合为一个，它的工作原理如下：
<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并应用到其他地方， other Screens，具有相同的组件，甚至不应该应用这种样式。
为什么会这样？是否以某种方式兑现？我该如何解决？
提前感谢您的任何帮助/建议。
我找到了一个解决方案，感谢@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 那样接近，因为每个类都需要单独的引号并用逗号分隔，但它确实有效！但后来我走得更远，做了这个：
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>;
};
它更紧凑，我可以编码香草顺风并且没有“泄漏”。所以双赢！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句