Переопределение поля в компоненте разделителя в пользовательском интерфейсе Fluent с использованием React - PullRequest
Новая
       33

Переопределение поля в компоненте разделителя в пользовательском интерфейсе Fluent с использованием React

0 голосов
/ 30 мая 2020

Я пытаюсь переопределить атрибут поля компонента Separator с помощью пользовательского интерфейса Microsoft Fluent UI с помощью React. Верхнее поле по умолчанию составляет 15 пикселей, и я бы хотел, чтобы оно было меньше этого.

Вот скриншот:

Problem pic

В разделе бежевого цвета выше по умолчанию установлено значение 15 пикселей, и я хотел бы уменьшить его, но я не могу найти правильный css для этого.

Вот код, который у меня есть на данный момент: 

  const separatorStyles = {
    root: [
      {
        margin: 0,
        padding: 0,
        selectors: {
          '::before': {
            background: 'black',
            top: '0px'
          }
        }
      }
    ]
  };

  export default class Home extends Component {
  render() {
    return (
      <Stack verticalAlign="center" verticalFill gap={15}>
        <Component1/>
        <Separator styles={separatorStyles} />
        <Component2 />
      </Stack>
    );
  }
}

Я попытался разместить margin: 0 там, где он сейчас находится на уровне root и также вложен ниже ::before, но ни один из них не работал.

Единственная другая потенциальная подсказка, которую я получил, - это проверка стилей в DevTools Chrome, которая дает:

enter image description here

Мы будем благодарны за любые идеи!

Спасибо за ваше время!

1 Ответ

1 голос
/ 03 июня 2020

15px на самом деле получено из свойства gap, которое было передано компоненту Stack. Он позаботится о добавлении этого класса css к дочерним элементам, чтобы обеспечить наличие правильных полей.

Я считаю, что его полное удаление должно решить вашу проблему, например, в этом примере ( ссылка на рабочий код ): 

<Stack verticalAlign="center" verticalFill>
        <button>Button1</button>
        <Separator>no margin</Separator>
        <button>Button2</button>
        <Separator />
        <button>Button3</button>
      </Stack>

Однако стоит отметить, что Separator ожидает визуализации некоторого текста, поэтому у вас могут возникнуть проблемы с получением точной высоты, которую вы хотите (так как размер шрифта забота о Сепараторе). В этом случае вам может быть лучше просто создать свой собственный элемент управления для визуализации линии 1px с простым div или span.

...