微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

导出样式组件不包括 CSS

如何解决导出样式组件不包括 CSS

我正在使用样式化组件创建一个组件库,以覆盖来自其他库的组件中的 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,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,&: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,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>
  );
};

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。