更改react-select组件中的css
我的反应中有以下选择组件。我需要修改这个组件。
所以我使用下面的代码。
const customStyles = {
option: (provided:any, state:any) => ({
...provided,
margin:'10px',
}),
control: (provided:any) => ({
...provided,
height: '48px !important',
'line-height': '2rem center',
border: '#e6e6e6 solid 5px !important',
}),
input:(provided:any)=>({
...provided,
'margin-top':'-25px',
})
}
下面是选择组件。
<Select
id="sponsor"
name="sponsor"
placeholder={sponsor}
styles={customStyles}
options={result.map((sponsor:Sponsor)=>
({ label: sponsor.name, value: sponsor.id })
)}
>
实际上，前辈不允许在 react jsx 文件中编写 css。无论如何，我可以将此 customStyles 代码转换为 css 格式吗？我尝试了很多，但是修改 react-select 组件的 css 并不容易。
I have below select component in my react. I need to modify this component.
so I am using below code for it.
const customStyles = {
option: (provided:any, state:any) => ({
...provided,
margin:'10px',
}),
control: (provided:any) => ({
...provided,
height: '48px !important',
'line-height': '2rem center',
border: '#e6e6e6 solid 5px !important',
}),
input:(provided:any)=>({
...provided,
'margin-top':'-25px',
})
}
below is select component.
<Select
id="sponsor"
name="sponsor"
placeholder={sponsor}
styles={customStyles}
options={result.map((sponsor:Sponsor)=>
({ label: sponsor.name, value: sponsor.id })
)}
>
actually seniors are not allowing to write css in react jsx file. is there anyway I can convert this customStyles code to css format? I tried a lot but its not easy to modify css for react-select component.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
const CustomStyles = {
选项：（提供：任何状态：任何）=＆gt; （{
...假如，
保证金：'10px'，
}），
控制：（提供：任何）=＆gt; （{
...假如，
身高：'48px！重要'，
“线高”：“ 2REM中心”，
边界：'＃e6e6e6实心5px！重要'，
}），
输入：（提供：任何）=＆gt;（{{
...假如，
'保证 - top'：' - 25px'，
}））
} 强文
const customStyles = {
option: (provided:any, state:any) => ({
...provided,
margin:'10px',
}),
control: (provided:any) => ({
...provided,
height: '48px !important',
'line-height': '2rem center',
border: '#e6e6e6 solid 5px !important',
}),
input:(provided:any)=>({
...provided,
'margin-top':'-25px',
})
}strong text