在react中设置css样式以及条件语句写法

Posted 2023-05-13

参考技术A 在react中设置css样式

以上是行内式的样式设置，渲染的结果是

当然还可以使用require直接引入.css文件的，但由于还是初学，并未涉及，以后补上

react中的条件语句的写法

1.三元表达式

在create-react-app脚手架工具里的表现为

ReactJS - CSS：在样式对象中设置 trasitionProperty 不起作用

【中文标题】ReactJS - CSS：在样式对象中设置 trasitionProperty 不起作用

【英文标题】：ReactJS - CSS: setting trasitionProperty in style object does not work

【发布时间】：2017-03-30 13:49:59

【问题描述】：

我目前正在使用基于属性更新的 css 转换来处理我的 react 组件中的动画，到目前为止一切都运行良好。

我现在遇到的问题是，我只需要在我的一个组件上转换一些 css 属性。自然地，我尝试设置 'transitionProperty' css 设置来完成此操作，但由于某种原因，react 根本没有设置此设置！

代码示例：

<div style=
    color: 'red',
    background-color: 'green',
    transition: 'all 1s ease-out', 
    transitionProperty: 'color, background-color'
 />

它给我的结果是：

<div style="color:red; background-color:green; transition:all 1s ease-out" />

没有“过渡属性”！

我正在使用带有 Webpack 构建堆栈的 ReactJS，并且已经尝试过像 WebkitTransitionProperty:

这样的前缀

我在这里错过了什么？

【问题讨论】：

尝试使用transitionDuration: '1s', transitionTimingFunction: 'ease-out', transitionProperty: 'color, background-color'。可能是transition 和transitionProperty 不能一起使用，也可能是因为你使用了transition: 'all ...'。

我也很惊讶 background-color 工作，它应该是 backgroundColor 在 React 中。

第二个代码框是你在浏览器中得到的结果，因此：background-color

是的，我认为它是生成的 DOM 元素。我指的是style=... 中的background-color，它应该是backgroundColor 以作为有效的JS 对象属性名称并符合React 内联样式属性命名。

5 年后...我仍然遇到这个原始问题。接受的答案有效，但我很想知道为什么这不起作用。这是一个反应错误吗？

【参考方案1】：

转换的语法是：

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

所以你可以写：

transition: 'color 1s ease-out, background-color 1s ease-out'

---

还有transitionProperty是JavaScript的语法，例如：

document.getElementById("myDIV").style.transitionProperty = "width,height";

在 CSS 中你应该使用 transition-property ：

transition-property: 'color, background-color'

【讨论】：

谢谢这解决了我的问题。但我仍然想知道为什么 react 会踢出“transition-property”css 设置。