如何找到我可以在 ant design 组件中编辑的所有样式属性？答案

【问题标题】：How to find all of the style attributes I can edit in ant design component?如何找到我可以在 ant design 组件中编辑的所有样式属性？
【发布时间】：2018-08-17 17:26:52
【问题描述】：

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

<Card
    bordered={false}
    style={{
    // how do I find all of the attributes I can edit right here
    }}
>

【问题讨论】：

标签： css reactjs web-component antd

【解决方案1】：

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

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

您的 css 文件将如下所示：（根据需要添加更多特异性）

.cardBorder {
    border: none;
}

你的卡片组件如下：

<Card className="cardBorder" />

通过这个，您可以进行任何类型的 css 修改。除了内联样式，最好有单独的 css 文件并处理它们。

【讨论】：

我使用className="card" 尝试了这个，然后用border-top: 10px 导入了css文件，但不是将顶部边框设为10px，而是去掉了顶部边框...跨度>

【解决方案2】：

您可以通过浏览器页面上的开发工具来完成：

在“元素”面板中选择所需的元素并转到“样式”选项卡：

<div class="ant-card ant-card-bordered" style="border-top: 1px;border-bottom: 1px;width: 300px;">

样式标签：

.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;

【讨论】：