nivoのbarのlegendsにcssを適用して、文字が画面からはみ出たときに折りたたむ様にしたいです。

前提・実現したいこと

nivoのbarのlegendsにcssを適用して、
文字が画面からはみ出たときに折りたたむ様にしたいです。

試したこと

ドキュメンテーションを読んだのですが、
legendsのところにcssに関することは書いていませんでした。
分かる方がいましたら教えていただきたいです。

該当のソースコード

javascript
1import { ResponsiveBar } from '@nivo/bar'
2// make sure parent container have a defined height when using
3// responsive component, otherwise height will be 0 and
4// no chart will be rendered.
5// website examples showcase many properties,
6// you'll often use just a few of them.
7const MyResponsiveBar = ({ data /* see data tab */ }) => (
8    <ResponsiveBar
9        data={data}
10        keys={[ 'hot doghot doghot doghot doghot dog', 'burgerhot doghot doghot doghot dog', 'sandwich', 'kebab', 'fries', 'donut' ]}
11        indexBy="country"
12        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
13        padding={0.3}
14        colors={{ scheme: 'nivo' }}
15        defs={[
16            {
17                id: 'dots',
18                type: 'patternDots',
19                background: 'inherit',
20                color: '#38bcb2',
21                size: 4,
22                padding: 1,
23                stagger: true
24            },
25            {
26                id: 'lines',
27                type: 'patternLines',
28                background: 'inherit',
29                color: '#eed312',
30                rotation: -45,
31                lineWidth: 6,
32                spacing: 10
33            }
34        ]}
35        fill={[
36            {
37                match: {
38                    id: 'fries'
39                },
40                id: 'dots'
41            },
42            {
43                match: {
44                    id: 'sandwich'
45                },
46                id: 'lines'
47            }
48        ]}
49        borderColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
50        axisTop={null}
51        axisRight={null}
52        axisBottom={{
53            tickSize: 5,
54            tickPadding: 5,
55            tickRotation: 0,
56            legend: 'country',
57            legendPosition: 'middle',
58            legendOffset: 32
59        }}
60        axisLeft={{
61            tickSize: 5,
62            tickPadding: 5,
63            tickRotation: 0,
64            legend: 'food',
65            legendPosition: 'middle',
66            legendOffset: -40
67        }}
68        labelSkipWidth={12}
69        labelSkipHeight={12}
70        labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.6 ] ] }}
71        legends={[
72            {
73                dataFrom: 'keys',
74                anchor: 'bottom-right',
75                direction: 'column',
76                justify: false,
77                translateX: 120,
78                translateY: 0,
79                itemsSpacing: 2,
80                itemWidth: 100,
81                itemHeight: 20,
82                itemDirection: 'left-to-right',
83                itemOpacity: 0.85,
84                symbolSize: 20,
85                effects: [
86                    {
87                        on: 'hover',
88                        style: {
89                            itemOpacity: 1
90                        }
91                    }
92                ]
93            }
94        ]}
95        animate={true}
96        motionStiffness={90}
97        motionDamping={15}
98    />
99)