为什么我不能将 borderRadius 应用到这个 React 引导选项卡？答案

【问题标题】：Why can't i apply borderRadius to this React bootstrap tab?为什么我不能将 borderRadius 应用到这个 React 引导选项卡？
【发布时间】：2020-10-18 22:41:34
【问题描述】：

我有这个选项卡式内容，我想应用边框半径。如果我添加 style={{borderRadius: "10px"}} 它什么也不做。在其他地方工作。 scss 中的 Tabs 也不会覆盖它。

无论我尝试在哪里应用边界半径，它都没有任何效果。我错过了什么吗？

这是标签。

   <Col md={6} xl={4} className='m-b-30' >
                        <Tabs defaultActiveKey="today" style={{borderRadius: "10px"}} >
                            <Tab eventKey="today" title="Today" >
                                {tabContent}
                            </Tab>
                            <Tab eventKey="week" title="Tomorrow">
                                {tabContent}
                            </Tab>
                            <Tab eventKey="all" title="Active Status">
                                {tabContent}
                            </Tab>
                        </Tabs>
                    </Col>

以下是标签内容。

const tabContent = (
            <Aux>
                <div className="media friendlist-box align-items-center justify-content-center m-b-20"style={{border: "solid 1px black"}}>
                    <div className="m-r-10 photo-table">
                        <a href={DEMO.BLANK_LINK}><img className="rounded-circle" style={{width: '40px'}} src={avatar1} alt="activity-user"/></a>
                    </div>
                    <div className="media-body">
                        <h6 className="m-0 d-inline">Evelina Tofan</h6>
                        <span className="float-right d-flex  align-items-center">DO &nbsp;<i className="fa fa-caret-down f-22 m-r-10 text-c-red"/></span>
                    </div>
                </div>
                <div className="media friendlist-box align-items-center justify-content-center m-b-20">
                    <div className="m-r-10 photo-table">
                        <a href={DEMO.BLANK_LINK}><img className="rounded-circle" style={{width: '40px'}} src={avatar3} alt="activity-user"/></a>
                    </div>
                    <div className="media-body">
                        <h6 className="m-0 d-inline">Anel Stancov</h6>
                        <span className="float-right d-flex  align-items-center">DO &nbsp;<i className="fa fa-caret-down f-22 m-r-10 text-c-red"/></span>
                    </div>
                </div>
                <div className="media friendlist-box align-items-center justify-content-center m-b-20">
                    <div className="m-r-10 photo-table">
                        <a href={DEMO.BLANK_LINK}><img className="rounded-circle" style={{width: '40px'}} src={avatar2} alt="activity-user"/></a>
                    </div>
                    <div className="media-body">
                        <h6 className="m-0 d-inline">Denis Sultu</h6>
                        <span className="float-right d-flex  align-items-center">12PM - 9PM &nbsp;<i className="fa fa-caret-up f-22 m-r-10 text-c-green"/></span>
                    </div>
                </div>
                <div className="media friendlist-box align-items-center justify-content-center m-b-20">
                    <div className="m-r-10 photo-table">
                        <a href={DEMO.BLANK_LINK}><img className="rounded-circle" style={{width: '40px'}} src={avatar2} alt="activity-user"/></a>
                    </div>
                    <div className="media-body">
                        <h6 className="m-0 d-inline">Vasile Mirzan</h6>
                        <span className="float-right d-flex  align-items-center">9AM - 6PM &nbsp;<i className="fa fa-caret-up f-22 m-r-10 text-c-green"/></span>
                    </div>
                </div>
                <div className="media friendlist-box align-items-center justify-content-center m-b-20">
                    <div className="m-r-10 photo-table">
                        <a href={DEMO.BLANK_LINK}><img className="rounded-circle" style={{width: '40px'}} src={avatar1} alt="activity-user"/></a>
                    </div>
                    <div className="media-body">
                        <h6 className="m-0 d-inline">Andra Danila</h6>
                        <span className="float-right d-flex  align-items-center">9PM - 6AM &nbsp;<i className="fa fa-caret-up f-22 m-r-10 text-c-green"/></span>
                    </div>
                </div>
                <div className="media friendlist-box align-items-center justify-content-center">
                    <div className="m-r-10 photo-table">
                        <a href={DEMO.BLANK_LINK}><img className="rounded-circle" style={{width: '40px'}} src={avatar1} alt="activity-user"/></a>
                    </div>
                    <div className="media-body">
                        <h6 className="m-0 d-inline">Maria-Alexandra Serban</h6>
                        <span className="float-right d-flex  align-items-center">DO<i className="fa fa-caret-down f-22 m-r-10 text-c-red"/></span>
                    </div>
                </div>
            </Aux>
        );

【问题讨论】：

您是否尝试过使用 !important 来确保某些东西不会覆盖它？
你能告诉我你从哪里导入“标签”组件吗？
您始终可以使用浏览器中的 DOM 检查器工具解决此类问题。
是的，我也试过了，还是没有效果。
我正在从 react-bootstrap 导入

标签： javascript css reactjs bootstrap-4 react-bootstrap

【解决方案1】：

Tabs 是一个组件，通过指定样式，您将发送一个名为样式的道具，该道具是一个具有名为边框半径的属性的对象。如果选项卡（组件）不使用/实现该道具（在这种情况下名为“样式”，为了澄清起见，它可以命名为其他任何东西）不会产生任何影响。

您可以为 JSX/HTML 元素指定样式以获得所需的效果，或者修改 Tabs 组件，使其使用“style”属性将样式转发给它的一些子元素（其他组件或 JSX 元素）

【讨论】：