如何将 chakra-ui 样式应用到自定义组件？ （反应日期选择器）

Question

我想通过 Chakra-ui 样式为我的 Datepicker 组件定义样式。

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { chakra } from '@chakra-ui/react';
const StyledDatepicker = chakra(DatePicker);

我使用了 chakra 工厂函数，能够通过 props 为

StyledDatepicker

提供一些样式，如上面的代码所示，但我想像我所做的那样在单独的 styles .ts 文件中定义所有内容对于内置脉轮组件。

我制作了一个包含一些样式定义的 Datepicker.ts 文件，并将其添加到

overrides

对象中，该对象在此处作为样式导出：

const styles = extendTheme(overrides);
export { styles };

导入到 App.tsx 中并分配给我的 ChakraProvider 的

theme

属性。

我制作了一些自定义组件，虽然不完全是我想要的，但很好，并且我希望更改标题容器的样式，具有类名的元素

react-datepicker__header

- 没有制作自定义的示例React-datepicker 网站上的组件。我知道我可以使用 CSS 文件来完成此操作，但为了保持一致性，我真的很想在样式文件中完成所有操作。

Answer 1

答案相当简单，但在我看来，脉轮可以让了解这种可能性变得更容易一些。 要定位 css 类，只需将类名添加到样式对象中，如下所示：

const DatepickerStyles = {
    baseStyle: {
        color: 'black',
        '.react-datepicker__header': {
            background: 'white',
        },
    },
};

然后在您想要使用组件的地方执行类似的操作（在我的例子中是日期选择器，但这适用于任何组件）：

function MyDatePickerComponent(props) {

    const datepickerStyles = useStyleConfig('Datepicker');

    return (
            <Datepicker
                __css={datepickerStyles}
                //some required props omitted for simplicity
            />
    );
}

您可以使用

sx

代替

__css

，我使用

__css

是为了便于阅读。 对于

react-datepicker

和我专门设置标题样式的情况，我必须使用自定义

calendarContainer

组件，其中我还使用

useMultiStyleConfig

而不是

useStyleConfig

以类似的方式应用样式。希望这对某人有帮助。

Answer 2

仅供未来观看者使用，这里有一个包，用于使用基于 Chakra UI 的日期选择器