🐕
【ChakraUI】AccordionPanel内のツールチップが見切れる
コード
theme.ts
const styles = {
global: {
':not(.chakra-dont-set-collapse) > .chakra-collapse': {
overflow: 'initial !important',
},
},
};
export const theme = extendTheme({
styles,
...
});
説明
上記のコードをtheme.tsに入れる。
_app.tsxとかでtheme.tsをimportすればOK。
AccodionItem の中で AccordionPanel を呼び出すと
AccodionItem>button+div.chakra-collapse のようになるみたい。
div.chakra-collapse の方が overflow:hidden; になっているからimportantで無効化している。
本当はstyleよりcomponentで設定したいし、
importantは使いたく無かったがそれは断念。
参考記事
Discussion