Why does my inline styling not work with react?

Asked
Active3 hr before
Viewed126 times

10 Answers

react
90%

So instead of background-image use backgroundImage.,In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.,React follow the camelcase convention so you have to change background-image to backgroundImage instead.

For example:

padding - top-- - > paddingTop

padding - left-- - > paddingLeft

margin - right-- - > marginRight

   ...

Like this:

<div 
    style={{
       backgroundImage: 'url(../images/WinterCalling_2016.jpg)', 
       marginTop: 20}}
>

We can use template literals to pass a variable inside url, like this:

<div style={{backgroundImage: `url(${image1})`}}>
load more v
88%

The properties in our styles object must be camelCase style, this is something related to the JavaScript language, we cannot have kebab-case because it does not work with the syntax rule.,Now, let’s talk about the most used way to style React applications, why this concept is not a very good idea for your applications, and why you shouldn’t use it.,In this article, we learned about some ways to style React applications, we learned more about the inline styling concept in React, and why we shouldn’t be using this concept if we’re planning to have a scalable and productive application.

Pretag
 Pretag team - issue, fix, solve, resolve
72%

In React, inline styles are not specified as a string. The style attribute accepts a JavaScript object with camelCased properties.,Defining Inline Styles with React,CSS Properties Reference React Doc Ref of Inline Styling:

1
<!DOCTYPE html>
2<html>
3

<head>
   4 <title>Inline CSS</title>
   5 </head>
6

<body>
   7 <p style="font-size: 20px; color:#4a54f1; text-align:center; padding-top:100px;">
      8 Hello World!!!
      9 </p>
   10 </body>
11

</html>
load more v
65%

Yes, see the docs on styling here.,CSS classes are generally better for performance than inline styles.,It is common for CSS classes to depend on the component props or state:

render() {
  return <span className="menu navigation-menu">Menu</span>
}
load more v
75%

Inline styles are not react specific They are a regular HTML feature:,Instead of defining the style object inline, we could also define an object in our code that stores the style properties.,Inside of the CSS file, we can define the class:

<p style="color: red">Example Text</p>
load more v
40%

Pretag
 Pretag team - issue, fix, solve, resolve
22%

In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string (more on that later):,Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. node.style.backgroundImage). Vendor prefixes other than ms should begin with a capital letter. This is why WebkitTransition has an uppercase "W"., Inline Styles

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);
60%

There are many ways to style React with CSS, this tutorial will take a closer look at inline styling, and CSS stylesheet.,Since the inline CSS is written in a JavaScript object, properties with two names, like background-color, must be written with camel case syntax:,To style an element with the inline style attribute, the value must be a JavaScript object:

Insert an object with the styling information:

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}
load more v
48%

There seems to be a number of ways of styling React components used widely in the industry for production level work:,You can learn more about this approach in the JSS official documentation. There’s also a way to try it out using their REPL (read-eval-print loop).,I don’t think anyone needs an introduction to inline CSS. This is the CSS styling sent to the element directly using the HTML or JSX. You can include a JavaScript object for CSS in React components, although there are a few restrictions such as camel casing any property names which contain a hyphen. You can style React components in two ways using JavaScript objects as shown in the example.

Pretag
 Pretag team - issue, fix, solve, resolve
23%

With React Native, you style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color.,react-native#29308: In some cases React Native does not match how CSS works on the web, for example the touch area never extends past the parent view bounds and on Android negative margin is not supported.,There are a lot more ways to customize the text style. Check out the Text component reference for a complete list.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "react-undefined" queries related to "Why does my inline styling not work with react?"