Comment est-ce que je peux styliser deux boutons pour les aligner dans glamour?

Question

Je me lance dans le glamour, un module de style composant React. J'ai deux boutons que j'essaye de dénommer: Add et Clear. J'essaye d'avoir les deux boutons sur la même rangée avec le bouton Clear sur la gauche et le bouton Add sur la droite. J'ai du mal à faire les deux boutons sur la même rangée. Au lieu de cela, le bouton Clear se trouve sous le bouton Add. Voilà ce que j'ai:

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

J'ai essayé d'ajouter display: "inline" au composant Button comme ceci:

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

Il n'a rien fait. Ensuite, j'ai essayé de changer à 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" 
    } 
}); 

Enfin, j'essayé d'ajouter overflow: "auto" au composant 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" 
    } 
}); 

Il n'a pas fonctionné aussi bien. Toutes mes tentatives n'ont rien fait pour les boutons. Comment puis-je placer les boutons sur la même ligne qui est uniformément espacée sur le formulaire?

Answer 1

Je sais que ça fait un certain temps, mais peut-être cela aidera quelqu'un:

Le problème est dans l'élément Form. Il a le style de colonne flex, c'est pourquoi il positionne ses enfants sur de nouvelles lignes. Si vous ajoutez un emballage autour des boutons, même un simple div, ils se comportent comme vous les attendez:

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

Voici un extrait de code légèrement modifié: https://stackblitz.com/edit/react-vgnjjz