Why inline styling doesnt work in react on components?

Question

Why inline styling doesnt work in react on components?I dont understand why this is not working.I know is possible to make it different ways.(with css files for example).Im just corius.The intellisense does not help by inline styling either.Its strange..

import "./App.css";
import Button from "./components/Button";

function App() {
  return (
    <div className="App"  >
      <Button style={{fontSize:"50px"}} />
    </div>
  );
}

export default App;

//this is from Button components

import React from "react";

const Button = () => {

  return (
    <div>
      <button>
        Change
      </button>
    </div>
  );
};

export default Button;

lissettdm · Accepted Answer · 2021-05-08 22:53:31Z

3

You need to pass the style property to the Button component:

const Button = ({style}) => {

  return (
    <div>
      <button style={style}>
        Change
      </button>
    </div>
  );
};

answered May 8, 2021 at 22:53

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why inline styling doesnt work in react on components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related