带有 react-select 样式组件的 Tailwind 双宏

Posted 2023-03-07

【中文标题】带有 react-select 样式组件的 Tailwind 双宏

【英文标题】：Tailwind twin macro with react-select styled component

【发布时间】：2021-08-01 11:32:54

【问题描述】：

我正在使用带有样式组件的 react-select，它正在工作，但我想使用双宏来使用顺风类。

import tw from 'twin.macro';
import styled from 'styled-components';
import Select from 'react-select';
export const StyledReactSelect = styled(Select)(() => [
  `
  .Select__control 
    height: 40px;
    width: 100%;
    border: 1px solid #a1a1a1;
    border-radius: 0;
    cursor: pointer;
  
  .Select__control:hover 
    border-color: #a1a1a1;
  
  .Select__control--is-focused 
    box-shadow: 0 0 0 1px black;
    outline: none;
  
  .Select__indicator-separator 
    display: none;
  
  .Select__menu 
    color: #3c3d3e;
  
`,
]);

现在我想将 tw(twin-macro) 与 react-select 类一起使用。谁能帮忙？

【参考方案1】：

考虑顺风，tw 和 styled 组件设置正确。我们可以这样做：

import tw from 'twin.macro';
import styled from 'styled-components';
import Select from 'react-select';
export const StyledReactSelect = styled(Select)(() => [
  `
  .Select__indicator-separator 
    $tw`hidden`
  
  .Select__menu 
    $tw`text-blue-600`
  
`,
]);

【参考方案2】：

因为我们已经集成了顺风，我们可以像下面这样使用它们

import styled from 'styled-components';
import tw from 'twin.macro';

export const FooterStyled = styled.footer`
  $tw`flex  bg-gray-800 flex-col`
`;

【讨论】：

是的，这是使用双宏的方式。但在我的情况下，我正在使用样式组件设置 react-select 样式，唯一可能的方法是使用 react-select 提供的类。所以我想将顺风类应用于反应选择类。

在这种情况下，最好让您自己的样式包装器组件在 react-select 中使用，您可以在整个应用程序中使用它。如果您需要更具体的示例，我将使用示例代码添加另一个答案。根据您的要求@Yash Sangai 的答案是正确的。