在ReactJS中应用CSS样式的特点。

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

Features of applying CSS styles in ReactJS

问题

以下是翻译好的部分:

我可以这样编写CSS样式:

.myClass {
  background-color: red;
}

.myClass.yellow {
  background-color: yellow;
}

然后我可以在我的React组件中这样使用它:

<div className="myClass yellow"/>

它运行得很好。但是,如果我在我的应用程序中使用module.css,该怎么重复这个过程呢?

英文:

I can write CSS styles this way:

.myClass {
  backdgoun-color: red;
}

.myClass.yellow {
  backdgoun-color: yellow;
}

And then I can use it in my React component this way:

&lt;div className=&quot;myClass yellow&quot;/&gt;

And it works very well. But how I can repeate it if I use module.css in my appliction?

答案1

得分: 1

.button {
  color: blue;
}

.button.warning {
  color: red;
}
import styles from './Button.module.css';

const Button = ({ isWarning }) => {
  const classNames = [styles.button];
  if (isWarning) {
    classNames.push(styles.warning);
  }

  return <button className={classNames.join(' ')}>;
}
英文:

With CSS modules you can do things as follows:

.button {
  color: blue;
}

.button.warning {
  color: red;
}
import styles from &#39;./Button.module.css&#39;;

const Button = ({ isWarning }) =&gt; {
  const classNames = [styles.button];
  if (isWarning) {
    classNames.push(styles.warning);
  }

  return &lt;button className={classNames.join(&#39; &#39;)}&gt;
}

huangapple
  • 本文由 发表于 2023年7月4日 21:51:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76613333.html
匿名

发表评论

匿名网友

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

确定