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