reactjs - ReactJS - 在React中,如何为html标记编写内联样式?

98 1

我想设置一个顶级组件的标题标签样式,如下所示:


 <div style={{


 ['h2']: {


 backgroundColor: 'red'


 }


 }}>


 <h2>test</h2>


 </div>



时间: 原作者:

136 4

你甚至可以使用样式化组件-这给你更多的灵活性。


import React from"react";


import ReactDOM from"react-dom";


import styled from 'styled-components';



const Div = styled.div`


 background-color: red


`;



const App = () => (


 <Div>


 <h2>Test</h2>


 </Div>


);



const rootElement = document.getElementById("root");


ReactDOM.render(<App />, rootElement);



希望有帮助!

原作者:
114 0

仅在标签样式中写入内联样式,你应该像这样使用className :


.content>h2{


 backgroundColor: 'red'


}

<div className="content">


 <h2>test</h2>


</div>
原作者:
84 1

样式定义中使用样式化组件和h2选择器,所以,这将会成为一个div,它会让孩子们拥有红色的bg。


const styled = styled.default; // = import styled from 'styled-components';



const Div = styled.div`


 h2 {background: red};


`;



const App = () => (


 <Div>


 <h2>test</h2>


 <p>Paragraph child is not redish</p>


 </Div>


)



ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<script src="https://unpkg.com/styled-components@1.4.3/dist/styled-components.js"></script>


<div id="root"></div>
原作者:
...