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

【问题标题】：Tailwind twin macro with react-select styled component带有 react-select 样式组件的 Tailwind 双宏
【发布时间】：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 类一起使用。谁能帮忙？

【问题讨论】：

标签： reactjs styled-components react-select tailwind-css

【解决方案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 的答案是正确的。