Внутренний стиль в React
Я бы предположил, что мне было бы легко его найти, но я нигде не могу его найти. В HTML вы можете стилизовать все свои теги (заголовки, абзацы, img и т. д.) Следующим образом:
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
Как мне сделать то же самое в React? Я хочу сослаться на все теги p и некоторые теги custom из классов.
Ответы 2
В реакции это будет примерно так. вы используете опору стиля для применения inline styles, а в реакции background-color - это backgrounColor.
Чтобы применить один и тот же стиль для всех тегов p, тегов h1 и тела, вы используете один и тот же файл .css, и вы помещаете все стили css в файл .css, а файл css должен быть импортирован в родительский компонент, чтобы стиль, который у вас есть в файле .css будет применяться. Что-то вроде ниже
app.css
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
Компонент App.js
import "./app.css";//so the styles will be applied to body and all h1 and p tags as global
Ниже приведены несколько примеров встроенного стиля реакции. Примечание: не является ни строкой, ни HTML, он называется JSX и является расширением синтаксиса для JavaScript. Док здесь
<body style = {{backgroundColor: "powderblue"}}>
<h1 style = {{color: "blue"}}> </h1>
<p style = {{color: "red"}}></p>
</body>
ИЛИ
render(){
const style= {colorBlue: "blue", colorRed: "red"};
return(
<div>
<h1 style = {{color: style.colorBlue}}> </h1>
<p style = {{color: style.colorRed}}></p>
</div>
)
}
@tdlanghe Добро пожаловать. Пожалуйста, проголосуйте также, если ответ полезен
ReactJs - это просто фреймворк javascript, который «работает» на HTML-странице. Итак, если вы хотите добавить эти определения стилей глобально, вы можете включить их в раздел заголовка вашей главной страницы макета или страницы-контейнера, той, которая содержит «корневой» компонент реакции.
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
<!-- your other css and javascript definitions, including probably react -->
</head>
<body>
<MyReactComponent />
</body>
</html>
Даже не думал о том, чтобы сделать внешнюю страницу css и вызвать ее. Спасибо!