GatsbyJS(React)で同じコンポーネントに別々のcssを指定する方法を教えてください(2)

Question

解決しないため再度投稿。
https://teratail.com/questions/316579

以下コピペ。

やりたいこと

同じコンポーネントに別々のcss(style)を使いたい。
cssは個別に指定できるようにしたい。
##考えたこと
このIf-Elseのやり方を見つけたので使えると思った。

Contents.js

class Template extends React.Component {
  render() {
    return (
      <Layout>
        <Buttons A=trueを指定 />
        <Buttons A=falseを指定 />

true,falseをコンポーネントに指定する方法がわからなかった。

Buttons.js

const Buttons = () => {
  return (
          {A
          ? <Button style={{...}}>
          : <Button>
          }
          </Button>
  );
};

export default ShareButtons;

初心者すぎて当たり前のことがわからないのでその点よろしくお願いします。