Question

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

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

“测试”的背景为红色时，我无法以其他方式执行此操作，因为在我的用例中，我得到了一个JSX元素作为包含h2元素的变量，但我不能充分强调最上面的示例是过于简化，在实际用例中，我必须做类似{props.children}

的操作，因此无法以任何明显的方式访问h2标签

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个孩子将拥有红色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>

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;

Answer 5

内联样式无法做到这一点，您应该尝试创建一个包含预期样式的styles对象，并使用组件style property对象基于它来获取预期元素的值您从自定义styles对象提供的属性名称。

使用样式对象的示例：

const styles = {
    header: {
      backgroundColor: red
    }
  }

function App() {
  return (
    <div className="App">
      <h2 style={styles.header}>test</h2>
    </div>
  );
}

或者仅在父元素上使用className，然后在外部文件中编写常规CSS并将其导入到组件文件中。

使用外部CSS文件的示例：

style.css

.App h2 {
  backgroundColor: red;
}

App.js

import "./style.css";

function App() {
  return (
    <div className="App">
      <h2>test</h2>
    </div>
  );
}

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

5 个答案: