首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何找到我可以在ant设计组件中编辑的所有样式属性?

如何找到我可以在ant设计组件中编辑的所有样式属性?
EN

Stack Overflow用户
提问于 2018-08-18 01:26:53
回答 2查看 446关注 0票数 0

我正在尝试创建一个蚂蚁设计卡片,它只在卡片的左右两侧有一个边框。我可以在卡片组件中直接编辑的bordered属性可以删除整个边框,也可以不删除任何边框。我希望能够在内联样式中指定边框的各个方面。在哪里/如何找到可以编辑的内联样式属性?

代码语言:javascript
运行
复制
<Card
    bordered={false}
    style={{
    // how do I find all of the attributes I can edit right here
    }}
>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-20 14:46:02

您可以通过浏览器页面上的开发工具来执行此操作:

在“图元”面板中,选择所需的图元,然后转到“样式”选项卡:

代码语言:javascript
运行
复制
<div class="ant-card ant-card-bordered" style="border-top: 1px;border-bottom: 1px;width: 300px;">

样式选项卡:

代码语言:javascript
运行
复制
.ant-card-bordered {
border: 1px solid #e8e8e8;
border-top-color: rgb(232, 232, 232);
border-top-style: solid;
border-top-width: 1px;
border-right-color: rgb(232, 232, 232);
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: rgb(232, 232, 232);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(232, 232, 232);
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
票数 0
EN

Stack Overflow用户

发布于 2018-08-18 01:42:00

为什么不创建一个css文件并将这些类名添加到'Card‘组件的'className’属性中呢?

您可以使用Chrome开发工具检查元素,并使用所需的类名编写CSS。

你的css文件如下所示:(根据需要添加更多细节)

代码语言:javascript
运行
复制
.cardBorder {
    border: none;
}

和您的卡片组件如下所示:

代码语言:javascript
运行
复制
<Card className="cardBorder" />

通过这个,你可以做任何类型的css修改。比起内联样式,最好有单独的css文件来处理这些。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51900309

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档