メモ限定公開

/** @jsx jsx */
import React, { useState } from 'react';
import { jsx, css } from '@emotion/core';

const or = "OR" 
const and ="AND";

export const Matchitem: React.FC = (props) => {
    const [selected, setselect] = useState(or);
        return (
            <div className="App">
            <button css=
            {selected === "OR" ? 
                css` border: 1px solid #5e81f4;
                font-weight: 600;
                color:#5e81f4;
                background-color: #bdccfb;`: undefined} //参考演算子
                onClick={() => setselect("OR")}>OR</button>
                <button
                    css= {selected === "AND" ? css` font-weight: 600;
                    color:#5e81f4;
                    background-color: #bdccfb;`: undefined} //参考演算子
                    onClick={() => setselect("AND")}>AND</button>
            </div>
        );
    }
export default Matchitem;