CSSなしでボタンのテキストカラーと背景カラーをstyleで設定する~React.jsベース~

<index.js>

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import MonoButton from './MonoButton';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //<React.StrictMode>
    <MonoButton />
  //</React.StrictMode>
);

 

<MonoButton.js>

import ArrangeButton from './ArrangeButton';

const MonoButton = ()=>{
    return(
        <div>
            <ArrangeButton buttonText="PUSH"/>
        </div>

    )
}

export default MonoButton;

 

<ArrangButton.js>

const ArrangeButton = (props)=>{
    return(
        <div>
            <button style={{'color':'#FF0000','backgroundColor':'#00FF00'}}>{props.buttonText}</button>
        </div>
    )

}

export default ArrangeButton;

 

という感じです。