Как написать встроенные стили для HTML-тегов в React? - PullRequest
Новая
       19

Как написать встроенные стили для HTML-тегов в React?

0 голосов
/ 15 мая 2019

Я хочу установить теги заголовка, стилизирующие компонент верхнего уровня, примерно так: 

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

Там, где «test» будет иметь красный фон, я не могу сделать это каким-либо другим способом, так как в моем случае использования я получаю элемент JSX в качестве переменной, содержащей элемент h2, я не могу выделить достаточно верхний пример с чрезмерно упрощен, и я не могу получить доступ к тегу h2 каким-либо очевидным способом в реальном случае использования, где я должен сделать что-то вроде {props.children}

Ответы [ 4 ]

3 голосов
/ 15 мая 2019

Вы можете даже использовать стилизованные компоненты - это дает вам больше гибкости. 

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

Надеюсь, это поможет !!!

1 голос
/ 15 мая 2019

Использовать стилизованный компонент и селектор h2 в определении стиля. Так что это даст рендеринг 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>
1 голос
/ 15 мая 2019

это только написать встроенный стиль в стиле тега. вы должны использовать className следующим образом: 

.content>h2{
   backgroundColor: 'red'
}
<div className="content">
  <h2>test</h2>
</div>
0 голосов
/ 15 мая 2019

Вы не можете сделать это с помощью встроенного стиля. Вы должны попытаться создать объект 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>
  );
}
...