如何解决导出样式组件不包括 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 举报,一经查实,本站将立刻删除。