ReactJS嵌套内联样式

Question

ReactJS嵌套内联样式

4

我有一个名为SearchBar的ReactJS组件

var SearchBar = React.createClass({
    render: function () {
        return (
            <div style={{width:'100%',position:'0',backgroundColor:'darkOrange'}}>
                <div style={[styles.dataBlock,styles.header]}>
                    <h1>MOVIE</h1>
                </div>
                <div styles={[styles.dataBlock,styles.searchForm]}>
                    <input style={[styles.dataBlock,styles.searchForm,styles.searchField]}
                        type="text" placeholder="Enter search term"/>
                </div>
            </div>
        );
    }
});

这里是 styles ：

var styles = {
    dataBlock: {
        width: '100%',
        height: '100%',
        margin: '0 auto',
        fontFamily: 'Helvetica',
        textAlign: 'center'
    },
    header: {
        width: 'inherit',
        marginLeft: 'auto',
        marginRight: 'auto'
    },
    searchField: {
        width: 'inherit'
    },
    searchForm: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto'
    }
};

看起来样式不起作用，显示 input 文本框没有我在 styles 中声明的 width:90%。我想使用样式继承，在 style 中放入内联样式数组。我这里有什么问题吗？如何在 ReactJS 中继承样式？

- necroface

请查看文档 https://facebook.github.io/react/tips/inline-styles.html - knowbody

我确实参考过它。但它说得太少了，没有涉及到我卡住的问题。请再次阅读我的问题，我想知道如何继承样式？我该如何继承样式？ - necroface

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Season · Answer 1

在文档中，

在React中，内联样式不是以字符串的形式指定的。相反，它们是用一个对象来指定，该对象的键是驼峰式版本的样式名称，值是样式的值，通常是一个字符串。

明确指出style需要是键值对的对象，而不是数组。这背后没有什么神奇的东西。样式对象可以使用原生JS或一些实用库（如lodash，underscore，jQuery等）组成，以适应您的项目。

// Vanilla JS
<div style={ Object.assign( styles.dataBlock, styles.searchForm ) }> ...
// Lodash
<div style={ _.assign( styles.dataBlock, styles.searchForm ) }> ...