React Inline Style - Style Prop Expects a Mapping from Style Properties to Values, Not a String

React inline style - style prop expects a mapping from style properties to values, not a string

Use "styles" prop instead of style

<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>

Here is a great reference from W3Schools which also shows you how to create an object with styling information, and refer to it in the style attribute:
reference for how to style React using CSS

Error: The `style` prop expects a mapping from style properties to values, not a string in ReactJS

Change the style prop to an object and camelCased properties:

<h1 style={{fontSize: `50px`}}>I am John Doe</h1>

See style in React docs.

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

The `style` prop expects a mapping from style properties to values, not a string

Try removing "" from the style props. https://codesandbox.io/s/6j91o6z56w

import React, { Component } from 'react';

class App extends Component {
  render() {
  const name = 'Red Header';
  const styleRed = {backgroundColor : 'red'};
  return (
    <div style={styleRed}>
      {name}
    </div>
  );
 }
}

Error: The `style` prop expects a mapping from style properties to values, not a string

You need to add the fill property in the svg element as shown below,

import React from "react";

const TwitterIcon = () => {
  const { fill, width, height } = styles;
  return (
    <svg
      viewBox="328 355 335 276"
      height={height}
      width={width}
      xmlns="http://www.w3.org/2000/svg"
      fill={fill}
    >
      <path d="M 630, 425A 195, 195 0 0 1 331, 600A 142, 142 0 0 0 428, 570A  70,  70 0 0 1 370, 523 A  70,  70 0 0 0 401, 521A  70,  70 0 0 1 344, 455 A  70,  70 0 0 0 372, 460A  70,  70 0 0 1 354, 370A 195, 195 0 0 0 495, 442A  67,  67 0 0 1 611, 380 A 117, 117 0 0 0 654, 363A  65,  65 0 0 1 623, 401A 117, 117 0 0 0 662, 390A  65,  65 0 0 1 630, 425Z" />
    </svg>
  );
};

const styles = {
  fill: "grey",
  width: 210,
  height: 500
};
export default TwitterIcon;

Working codesandbox

Uncaught Error: The `style` prop expects a mapping from style properties

<button onClick={this.onSignIn} style="">Sign In</button>

remove the style attribute or replace it by an object.

https://reactjs.org/docs/dom-elements.html#style

The `style` prop expects a mapping from style properties to values, not a string. Style with multiple property

You have to write it like that :

{ background: "all your properties", height: "100vh" }

please have a look at React documentation: https://reactjs.org/docs/dom-elements.html#style

---

Related Topics