如何将 chakra-ui 样式应用于自定义组件？ (react-datepicker)

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 工厂功能能够通过道具给 StyledDatepicker 一些样式，如上面的代码所示，但我想在单独的样式中定义所有内容.ts像我为 built-in 脉轮组件所做的那样归档。

我制作了一个包含一些样式定义的 Datepicker.ts 文件，并将其添加到 overrides object 中，该文件在此处导出为样式：

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

在 App.tsx 中导入并分配给我的 ChakraProvider 的 theme 道具。

我制作了一些很好的自定义组件，虽然不是我想要的，我正在寻找更改 header 容器的样式，类名为 [= 的元素17=] - react-datepicker 网站上没有为此制作自定义组件的示例。我知道我可以用 CSS 文件来完成，但我真的很想在样式文件中完成所有这些以保持一致性。

Answer 1

结果证明答案相当简单，但我认为，脉轮本可以让了解这种可能性变得更容易一些。要定位 css class，您只需将 class 名称添加到您的样式 object 中，如下所示：

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 和我专门为 header 设置样式的情况，我不得不使用自定义 calendarContainer 组件，我还通过使用 useMultiStyleConfig 以类似的方式应用了样式useStyleConfig。希望这对某人有所帮助。

如何将 chakra-ui 样式应用于自定义组件？ (react-datepicker)

How to apply chakra-ui styles to custom components? (react-datepicker)

reactjs

react-datepicker

chakra-ui