CODEWITHSUNDEEP
javascriptcssreactjsantd
Shahab Khan
Shahab Khan

Reputation: 1059

Ant design tab title style issues

tab title not taking padding

How to give styles to Ant Design tab. I need to style in component not globally. I need help anyone can do that.I am new to ant Design I try many times but fail. Check the code below. I did something like below:

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

Upvotes: 1

Views: 3452

Answers (1)

BadPiggie
BadPiggie

Reputation: 6359

CSS doesn't support nested selectors. But SCSS does.

css will be like,

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

Upvotes: 3

Related Questions