Как мне оформить две кнопки, чтобы они выстроились вместе в гламурный стиль?

Question

Я получаю свои руки в гламурный, который является модулем моделирования компонентов React. У меня есть две кнопки, которые я пытаюсь стилизовать: Add а также Clear, Я пытаюсь расположить две кнопки в одном ряду с Clear кнопка слева и Add Кнопка справа. У меня проблемы с нажатием двух кнопок в одном ряду. Вместо этого Clear кнопка под Add кнопка. Вот что у меня есть:

import * as React from "react";
import glamorous from "glamorous";
import { CSSProperties } from "glamorous/typings/css-properties";
import { graphql, InjectedGraphQLProps } from "react-apollo";
import { reduxForm, Field, FormProps, WrappedFieldProps } from "redux-form";
import { ItemListQuery, AddItemMutation, AddItemMutationVariables } from "../queries/types";

const Form = glamorous.form({
  display: "flex",
  flexFlow: "column nowrap",
  maxWidth: 320,
  "> *": { margin: "1 1 30px" }
});

const Label = glamorous.label({
  display: "flex",
  flexFlow: "column-reverse",
  "> :first-child": { marginTop: 5 }
});

const sharedInputStyles: CSSProperties = {
  backgroundColor: "#e9e9e9",
  border: "none",
  borderBottom: "2px solid #e9e9e9",
  padding: 6,
  outline: "none",
  transition: "all .2s ease-in",
  ":focus": {
    borderBottom: "2px solid #777",
  },
  fontSize: 14,
  fontWeight: 200
};

const ItemInput = glamorous.input(
  sharedInputStyles,
  { height: 24 }
);

const Button = glamorous.button({
  height: 40,
  backgroundColor: "#bababa",
  border: "none",
  outline: "none",
  ":focus": { border: "2px solid #777" },
  ":active": {
    backgroundColor: "#fff",
    border: "2px solid #dcdcdc"
  }
});

const ItemField = ({ input }: WrappedFieldProps<{}>) => (
  <ItemInput {...input} />
);

export interface AddItemProps extends
  InjectedGraphQLProps<{}>,
  FormProps<Partial<Item>, undefined, undefined> {
}

const AddItem = ({ handleSubmit }: AddItemProps) => (
  <Form onSubmit={handleSubmit}>
    <Label>
      Name
      <Field name="name" component={ItemField} />
    </Label>
    <Button type="submit">Submit</Button>
    <Button type="submit">Reset</Button>
  </Form>
);

Я пытался добавить display: "inline" к компоненту Button, как это:

const Button = glamorous.button({
  height: 40,
  backgroundColor: "#bababa",
  display: "inline",
  border: "none",
  outline: "none",
  ":focus": { border: "2px solid #777" },
  ":active": {
    backgroundColor: "#fff",
    border: "2px solid #dcdcdc"
  }
});

Это ничего не сделало. Затем я попытался изменить его на display: "inline-block":

const Button = glamorous.button({
  height: 40,
  backgroundColor: "#bababa",
  display: "inline-block",
  border: "none",
  outline: "none",
  ":focus": { border: "2px solid #777" },
  ":active": {
    backgroundColor: "#fff",
    border: "2px solid #dcdcdc"
  }
});

Наконец я попытался добавить overflow: "auto" к компоненту Button:

const Button = glamorous.button({
  height: 40,
  backgroundColor: "#bababa",
  display: "inline-block",
  overflow: "auto",
  border: "none",
  outline: "none",
  ":focus": { border: "2px solid #777" },
  ":active": {
    backgroundColor: "#fff",
    border: "2px solid #dcdcdc"
  }
});

Это не сработало. Все мои попытки ничего не сделали с кнопками. Как разместить кнопки в одном ряду, равномерно расположенном на форме?

Answer 1

Я знаю, что это было давно, но, возможно, это кому-то поможет:

Проблема в Form элемент. У него стиль flex-столбца, поэтому он размещает своих детей на новых строках. Если вы добавите обертку вокруг кнопок, даже простой div, они будут вести себя так, как вы ожидаете:

const AddItem = ({ handleSubmit } ) => (
  <Form onSubmit={handleSubmit}>
    <Label>
      Name
      <ItemField />
    </Label>
    <div>
      <Button type="submit">Submit</Button>
      <Button type="submit">Reset</Button>
    </div>
  </Form>
);

Вот слегка измененный фрагмент кода: https://stackblitz.com/edit/react-vgnjjz