如何在React中基于父标签添加子标签的CSS？

huangapple
go评论89阅读模式
英文:

How to add css of Child tag based on parant tag in React?

问题

  1. import React from 'react';
  2. const style = {
  3.     h2: {
  4.         fontSize: '20px',
  5.         color: 'black',
  6.     },
  7.     span: {
  8.         color: 'white',
  9.     }
  10. }
  11. const Main = () => {
  12.     return (
  13.         <h2 style={style}>你好<span>测试</span></h2>
  14.    );
  15. }
  16. export default Main;
英文: 
  1. import React from &#39;react&#39;;
  2. const style = {
  3.     h2 : {
  4.         fontSize: &#39;20px&#39;;
  5.         color: &#39;black&#39;;
  6.     } &amp; span: {
  7.        color: &#39;white&#39;;
  8.     }
  9. }
  10. const Main = () =&gt; {
  11.     return (
  12.         &lt;h2 style={style}&gt;Hello&lt;span&gt;Test&lt;/span&gt;&lt;/h2&gt; 
  13.    );
  14. }
  15. export default Main;

Note: <span> can be dynamic.
H2 is the parent tag and I applied style in the same tag I want that it will also be applicable to the child tag (<span>)too.

答案1

得分: 0

JSX样式属性与HTML的样式属性类似。样式属性和属性都只接受CSS属性。因此，不允许使用选择器、伪元素或伪类。

使用样式属性

替换以下内容：

  1. const style = {
  2.     h2 : {
  3.         fontSize: '20px';
  4.         color: 'black';
  5.     } & span: {
  6.        color: 'white';
  7.     }
  8. }
  10. const Main = () => {
  11.     return (
  12.         <h2 style={style}>Hello<span>Test</span></h2> 
  13.    );
  14. }

使用以下内容替换：

  1. const h2Style = {
  2.   fontSize: '20px';
  3.   color: 'black';
  4. }
  5. const spanStyle = {
  6.   color: 'white';
  7. }
  9. const Main = () => {
  10.     return (
  11.         <h2 style={h2Style}>Hello<span style={spanStyle}>Test</span></h2> 
  12.    );
  13. }

或更易读的方式：

  1. const styles = {
  2.   h2: {
  3.     fontSize: '20px';
  4.     color: 'black';
  5.   },
  6.   span: {
  7.     color: 'white';
  8.   }
  9. }
  11. const Main = () => {
  12.     return (
  13.         <h2 style={styles.h2}>Hello<span style={styles.span}>Test</span></h2> 
  14.    );
  15. }

但是，如果您只希望为h2元素定义样式，我们有更多选项：

CSS / SCSS

使用CSS，放在单独的文件中：

  1. import "./your-css.css";
  3. const Main = () => {
  4.     return (
  5.         <h2 className="title">Hello<span>Test</span></h2> 
  6.    );
  7. }

其中，.your-css.css 文件包含以下内容：

  1. .title {
  2.   fontSize: '20px';
  3.   color: 'black';
  4. }
  6. .title span {
  7.   color: 'white';
  8. }

或者，嵌套（如果使用预处理器如.scss）：

  1. .title {
  2.   fontSize: '20px';
  3.   color: 'black';
  5.   span {
  6.     color: 'white';
  7.   }
  8. }

CSS-in-JS

考虑更“React”风格的解决方案，我们可以使用CSS-in-JS，例如 styled-components 阅读更多：

  1. import React from 'react';
  2. import styled from 'styled-components';
  4. const Title = styled.h2`
  5.   fontSize: '20px';
  6.   color: 'black';
  8.   span {
  9.     color: 'white';
  10.   }
  11. `;
  13. const Main = () => {
  14.     return (
  15.         <Title>Hello<span>Test</span></Title> 
  16.    );
  17. }
  19. export default Main;
英文:

The JSX style property parallels HTML's style attribute. Both style property and attribute only accepts CSS properties. Hence, no selectors, pseudo-elements or pseudo-classes are allowed.

Using the style property

Replace the following:

  1. const style = {
  2.     h2 : {
  3.         fontSize: &#39;20px&#39;;
  4.         color: &#39;black&#39;;
  5.     } &amp; span: {
  6.        color: &#39;white&#39;;
  7.     }
  8. }
  10. const Main = () =&gt; {
  11.     return (
  12.         &lt;h2 style={style}&gt;Hello&lt;span&gt;Test&lt;/span&gt;&lt;/h2&gt; 
  13.    );
  14. }

With:

  1. const h2Style = {
  2.   fontSize: &#39;20px&#39;;
  3.   color: &#39;black&#39;;
  4. }
  5. const spanStyle = {
  6.   color: &#39;white&#39;;
  7. }
  9. const Main = () =&gt; {
  10.     return (
  11.         &lt;h2 style={h2Style}&gt;Hello&lt;span style={spanStyle}&gt;Test&lt;/span&gt;&lt;/h2&gt; 
  12.    );
  13. }

Or the more legible:

  1. const styles = {
  2.   h2: {
  3.     fontSize: &#39;20px&#39;;
  4.     color: &#39;black&#39;;
  5.   },
  6.   span: {
  7.     color: &#39;white&#39;;
  8.   }
  9. }
  11. const Main = () =&gt; {
  12.     return (
  13.         &lt;h2 style={styles.h2}&gt;Hello&lt;span style={styles.span}&gt;Test&lt;/span&gt;&lt;/h2&gt; 
  14.    );
  15. }

However, since you wish to only define the style for the h2 element, we have more options:

CSS / SCSS

Using CSS, on a separate file:

  1. import &quot;./your-css.css&quot;;
  3. const Main = () =&gt; {
  4.     return (
  5.         &lt;h2 className=&quot;title&quot;&gt;Hello&lt;span&gt;Test&lt;/span&gt;&lt;/h2&gt; 
  6.    );
  7. }

where, .your-css.css file contains

  1. .title {
  2.   fontSize: &#39;20px&#39;;
  3.   color: &#39;black&#39;;
  4. }
  6. .title span {
  7.   color: &#39;white&#39;;
  8. }

Or even, nested (if you use a preprocessor like .scss)

  1. .title {
  2.   fontSize: &#39;20px&#39;;
  3.   color: &#39;black&#39;;
  5.   span {
  6.     color: &#39;white&#39;;
  7.   }
  8. }

CSS-in-JS

Thinking of a more "React" solution, we could use CSS-in-JS, like styled-components Read More

  1. import React from &#39;react&#39;;
  2. import styled from &#39;styled-components&#39;;
  4. const Title = styled.h2`
  5.   fontSize: &#39;20px&#39;;
  6.   color: &#39;black&#39;;
  8.   span {
  9.     color: &#39;white&#39;;
  10.   }
  11. `;
  13. const Main = () =&gt; {
  14.     return (
  15.         &lt;Title&gt;Hello&lt;span&gt;Test&lt;/span&gt;&lt;/Title&gt; 
  16.    );
  17. }
  19. export default Main;

huangapple
  • 本文由 发表于 2023年6月6日 13:34:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/76411674.html
  • css
  • react-hooks
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定