logo标签列表

React 内联样式 - style 属性需要一个从样式属性到值的映射，而不是一个字符串。

javascriptcssreactjs
120

我正在尝试在我的React应用程序中设置内联样式。在这种情况下，是针对一个标签：

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

React告诉我:

未捕获的不变违规：'style'属性期望从样式属性到值的映射，而不是字符串。例如，使用JSX时，style={{marginRight: spacing + 'em'}}。此DOM节点由`SentenceView`呈现。

我不太确定它的意思。

PS：我尝试了不同的版本，所以我使用了paddingRight:5以及paddingRight:5+'px'以及paddingRight:5px，但都没有成功！

7个回答
99

使用 "styles" 属性代替 style

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

这里有一个来自W3Schools的很好的参考资料，它还向你展示了如何创建带有样式信息的对象，并在样式属性中引用它： 有关如何使用CSS为React添加样式的参考资料

28
"styles" 不是有效的 JSX 属性……这是怎么做到的呢？ - mohsinulhaq
19
同意之前的评论，尝试了各种样式都不起作用，但如果我使用“style”就可以。不确定为什么选这个作为答案。 - iceveda06
4
你是否正在使用CSS模块？如果是的话，你需要使用className={myStyles}而不是styles={myStyles}。CSS模块会自动将你的样式对象转换为一个className字符串。 - Bill Mei
1
这似乎可以工作，但实际上并没有起作用。即使您的应用程序现在可以编译而不会抛出错误，它也不会使用“样式”属性应用这些样式。您甚至可以将任何无效名称放在样式的位置，并且您的应用程序仍然可以编译，但您会注意到预期的样式未被应用。下面您可以看到Kanishk Verma的答案，其中解释了JSX与HTML语法的区别。 - KrnK
35

有几种方法可以为React组件设置样式。

https://facebook.github.io/react/docs/context.html

https://github.com/facebookincubator/create-react-app

  1. 使用style={css_object}或style={{color:this.props.color}}

  2. 使用className="your-class-name"

React REPL

https://jscomplete.com/repl

1 style Object

// <span style={styles}>

const styles = {
    color: "red",
    background: "#0f0",
    fontSize: "32px"
};

const BTN = (props) => {
    return (
        <div>
           My name is <button>{props.name}</button>
           <hr/>
           I'm <span style={styles}>{props.age}</span> yeas old!
        </div>
    );
};

const infos = {
    name: "xgqfrms",
    age: 23
};

ReactDOM.render(<BTN {...infos} />, mountNode);




// <span style={{color: styles.color}}>

const styles = {
    color: "red",
    background: "#0f0",
    fontSize: "32px"
};

const BTN = (props) => {
    return (
        <div>
           My name is <button>{props.name}</button>
           <hr/>
           I'm <span style={{color: styles.color}}>{props.age}</span> yeas old!
        </div>
    );
};

const infos = {
    name: "xgqfrms",
    age: 23
};

ReactDOM.render(<BTN {...infos} />, mountNode);

2 className & stylesheet.css

import './styles.css';

/*
.classname-color{
    color: "red";
    background: "#0f0";
}
*/


const BTN = (props) => {
    return (
        <div>
            My name is <button>{props.name}</button>
            <hr/>
            I'm <span className="classname-color">{props.age}</span> yeas old!
        </div>
    );
};

const infos = {
    name: "xgqfrms",
    age: 23
};

ReactDOM.render(<BTN {...infos} />, mountNode);
.classname-color{
    color: "red";
    background: "#0f0";
}

https://dev59.com/kF0a5IYBdhLWcg3wzbfV - xgqfrms
https://stackoverflow.com/questions/40448253/how-to-using-es6-arrow-function-to-realize-immediately-invoked-function-expressi?noredirect=1#comment78072726_40448253 - xgqfrms
17

JSX和HTML有所不同。请查看来自Udemy的下面的图形：（链接），JSX和HTML之间的区别

在HTML中是这样的：

<div style="background-color: red;"></div>

在JSX中，您编写

<div style={{ backgroundColor: 'red' }}></div>

条件式内联格式在两者中不同。

1
你自己制作了这些图形吗？如果不是，请分享你的来源！ - B--rian
1
图形来自 Udemy 课程：https://www.udemy.com/course/react-redux/learn/lecture/12531454#overview，由 Stephan Grinder 所授。 - kanishk verma
4

这是使用React定义和使用内联样式的方法。

/**
 * Style definitions.
 */
const STYLE = {
    infoColor: {
        color: 'green'
    },
    warningColor: {
        color: 'orange'
    },
    errorColor: {
        color: 'red'
    }
};

/**
 * Component
 */
class Welcome extends React.Component {

    /**
     * Rendering into the DOM.
     */
    render() {
        return (
            <div>
                <h2 style={STYLE.infoColor}>Welcome!</h2>
        )
    }
}
3

当我们在React中使用内联样式时，应该始终使用style={{styleproperties}}

错误：

<input style="margin:0 15px 0 0"/>

解决方案:

<input style={{margin:"0 15px 0 0"}}/>
0

不要用双引号或字符串包裹{{}}。

0
如果你想使用内联样式，尝试在JSX中只写入宽度，而不使用style属性，就像这样：
 <img src="./your-image.png" width="40px" />
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接