如何在 React 中为 html 标签编写内联样式？

Question

我想从顶级组件设置标题标签样式，如下所示：

 <div style={{
        ['h2']: {
            backgroundColor: 'red'
        }
    }}>
        <h2>test</h2>
    </div>

'test' 有一个红色背景，我不能这样做，因为在我的用例中我得到一个 JSX 元素作为一个包含 h2 元素的变量，我不能强调足够的顶部示例过于简化和在实际用例中，我无法以任何明显的方式访问 h2 标签，我必须执行诸如 {props.children} 之类的操作

Answer 1

您甚至可以使用样式化组件 - 这为您提供了更大的灵活性。

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);

Answer 2

它只是在标签样式中写入内联样式。 你应该像这样使用 className：

 .content>h2{ backgroundColor: 'red' }

 <div className="content"> <h2>test</h2> </div>

Answer 3

在样式定义中使用样式组件和h2选择器。 所以这将渲染一个 div，其中 div 的 h2 孩子会有红色背景。

 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>

Answer 4

您可以使用 styled-components 并从样式组件创建一个组件并像这样更新它的样式：

import styled from 'styled-components';

const H2 = styled.h2({
    fontSize: '1.5rem',
    fontWeight: 'bold'
});

const Test = () => {


    return (<><H2>Mon titre stylé</H2></>)
}
export default Test;