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

Question

やりたいこと

同じコンポーネントに別々の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;

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

Comments

[hoshi-takanori]

プロパティってやつを使って const Buttons = (props) => { とか書くことになると思います。詳しくは React を勉強してください。
https://ja.reactjs.org/docs/components-and-props.html

Answer 1

こういうことですか？

Contents.js

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

Buttons.js

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

export default ShareButtons;

Comments

[j11]

58:11 error Parsing error: Unexpected token, expected ","

56 | ..............
57 | return (
> 58 | {props.css
| ^
59 | ? <Bottom style= {{...}}>
60 | : <Button>
61 | }

✖ 1 problem (1 error, 0 warnings)

エラーがでます。

[j11]

Expected corresponding JSX closing tag for <Button>
というエラーがでます。
条件演算子内の<Button>が終了できていないみたいです。

[mikan3rd]

ButtonではなくBottomとなっていますがスペルミスでは？

[j11]

実際のコードはスペルミスになっていません。