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

Question

我正在将 react-select 与样式组件一起使用，它正在工作，但我想使用双宏来使用 tailwind 类。

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 一起使用。有人可以帮忙吗？

Answer 1

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

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

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

Answer 2

考虑到 tailwind，tw 和样式组件已正确设置。我们可以这样做：

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`}
  }
`,
]);

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

Tailwind twin macro with react-select styled component

reactjs

react-select

styled-components

tailwind-css