Question

标签标题未填充

如何将样式赋予“蚂蚁设计”选项卡。我需要在组件中设置样式而不是全局。我需要任何人都可以做到的帮助。我是ant Design的新手，我尝试了很多次但都失败了。检查下面的代码。我做了如下的事情：

          <Tabs
            defaultActiveKey="1"
            className={styles.tabsStyl}
          >
            <TabPane tab={<p className="register">Register</p>} key="1">
              <p className={styles.tab_para}>
                Register and create a human looking digital recuiter in a matter of 3 minutes
              </p>
              <Row type="flex" justify="center">
                <div className={styles.img_main_div}>
                  <div className={styles.androimg}>
                    <img src={Androimg} alt="imag" />
                  </div>
                </div>
              </Row>
            </TabPane>
            <TabPane size="large" tab="Invite" className={styles.tabsStyles} key="2">
              Content of Tab Pane 2
            </TabPane>
            <TabPane tab="Interview" className={styles.tabsStyles} key="3">
              Content of Tab Pane 3
            </TabPane>
            <TabPane tab="Hiring" className={styles.tabsStyles} key="4">
              Content of Tab Pane 3
            </TabPane>
            <TabPane tab="offer" className={styles.tabsStyle} key="5">
              Content of Tab Pane 3
            </TabPane>
          </Tabs>

.tabsStyl {
		font-family: Inter;
		font-style: normal;
		font-weight: bold;
		font-size: 16px;
		line-height: 24px;
		text-align: center;
		.ant-tabs-bar .ant-tabs-tab {
			border-color: transparent;
			background: transparent;
			color: #28a9e1;
			padding: 12 50px;
		}
	}

Answer 1

CSS 不支持nested selectors。但是 SCSS 可以。

css 就像

    .tabsStyle {
        font-family: Inter;
        font-style: normal;
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }

    .tabsStyl .ant-tabs-bar .ant-tabs-tab {
        border-color: transparent;
        background: transparent;
        color: #28a9e1;
        padding: 12 50px;
    }

蚂蚁设计标签标题样式问题

1 个答案: