Question

我正在使用样式化组件创建一个组件库，以覆盖来自其他库的组件中的 CSS，并且我正在使用 react-select 选择下拉菜单。

在 storybook 中，当我将 react-select 的 CSS 导入到 storybook 时，我的组件看起来不错。然后我导出组件并将其导入到我的另一个项目中，但它看起来不太好。我意识到它缺少来自 react-select 的 CSS！

我不想在我的主应用程序中添加 react-select 包，因为它应该已经包含在我的组件库中。当我尝试覆盖我从我自己的库中导入的 CSS 并忽略我正在使用的覆盖 CSS 时。

如何将 CSS 包含在带有样式组件的导出中的 react-select 中？

样式选择覆盖：

const StyledSelect = styled(Select)`
${space}
${position}
${layout}
${flexbox}
height: 32px;
width: 416px;
div.Select-control {
  background-color: ${props => props.theme.colors.background};
  border-color: ${props => props.theme.colors.primary};
  height: 32px;
  width: 416px;
  border-radius: 4px;
  div.Select-placeholder {
    color: rgba(255,255,255,0.65);
    text-align: left;
    font-family: ${props => props.theme.fonts.body};
  }
  span.Select-arrow-zone {
    background-color: ${props => props.theme.colors.background} !important;
    color: ${props => props.theme.colors.primary} !important;
    fill: ${props => props.theme.colors.primary} !important;
  }
  &:hover, &:active, &:focus {
    border-color: ${props => props.theme.colors.primary} !important;
  }
}

div.Select-input {
  width: 416px !important;
  background-color: ${props => props.theme.colors.background};
  border-color: ${props => props.theme.colors.primary} !important;
  input {
    height: 32px;
    width: 416px;
    border: ${props => props.theme.colors.primary};
    background-color: ${props => props.theme.colors.background};
    border-radius: 4px;
    &:hover, &:active, &:focus {
      border-color: ${props => props.theme.colors.primary} !important;
    }
  }
}

div.Select-menu-outer {
  background-color: ${props => props.theme.colors.background} !important;
  color: ${props => props.theme.colors.primary} !important;

  &:hover {
    color: ${props => props.theme.colors.primary} !important;
  }
  div.Select-menu {
    color: ${props => props.theme.colors.primary} !important;
    div.Select-option {
      color: rgba(255,255,255,0.65);
      background-color: ${props => props.theme.colors.background} !important;
      text-align: left;
      &:hover {
        background-color: ${props => props.theme.colors.primary} !important;
        color: white !important;
      }
    }
  }
}
`;
export { StyledSelect };

在我的主应用中：

import { Label as Input, StyledSelect as Select } from '@luxe/components';

export const ParentForm = ({ isReadOnly = false, onChange, options }) => {
  return (
    <Form.Item
      name="parent"
      label={<label style={{ color: 'white' }}>Profile Based On</label>}
      rules={[
        {
          required: false,
          message: 'Select a parent risk profile',
        },
      ]}
    >
      <Select options={options} onChange={onChange} />
    </Form.Item>
  );
};

导出样式组件不包括 CSS

0 个答案: