Как выровнять элемент по центру с помощью Ant Design PageHeader?

Question

Я пытался центрировать кучу кнопок в NavBar, используя платформу Ant Design.

NavBar.tsx

const NavBar: React.FC<NavBarProps> = ({ title }) => {
  return (
    <PageHeader
      style={{
        display: flex,
        align-items: center, //Doesn't work.
        backgroundColor: "#F5F5F5"
      }}
      backIcon={
        <Icon theme="twoTone" style={{ fontSize: "32px" }} type="skin"></Icon>
      }
      onBack={() => null}
      title={
        <Title style={{ margin: "0px" }} level={1}>
          Athena.
        </Title>
      }
      extra={[
        <RegularButton size="large" icon="shopping-cart">
          Cart.
        </RegularButton>,
        <RegularButton size="large" icon="profile">
          Profile.
        </RegularButton>
      ]}
    />
  );
};

export default NavBar;

Однако, если я редактирую дочерний элемент через inspect-element, он работает.

.ant-page-header-heading {
    width: 100%;
    overflow: hidden;
    align-items: center;
    display: flex;
}

^ Кнопки плавают к вершине, а не выровнены по центру.

Как я могу нацелиться на дочерний элемент, используя реквизиты style?

Answer 1

Как настроить таргетинг на дочерний элемент с помощью реквизита style?

Нельзя, см. Style Prop.

Поэтому вам нужно настроить CSS-селектор как обычно или с помощью CSS-in-JS.

Проверьте FAQ по стилю .

// index.css
.ant-page-header-heading {
  background: paleturquoise;
}

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { PageHeader } from 'antd';
import styled from 'styled-components';

const HeaderColoredContent = styled(PageHeader)`
  .ant-page-header-content {
    background-color: palevioletred;
  }
`;

// v Will apply both styles.
ReactDOM.render(
  <div>
    <HeaderColoredContent
      ...
    </HeaderColoredContent>
  </div>,
  document.getElementById('container')
);