React中的内联CSS样式:如何实现:hover？

Question

我非常喜欢React中的内联CSS模式,并决定使用它.

但是,您不能使用:hover和类似的选择器.那么在使用内联CSS样式时实现高亮显示的最佳方法是什么？

#reactjs的一个建议是拥有一个Clickable组件并像这样使用它:

<Clickable>
    <Link />
</Clickable>

该Clickable有一个hovered状态,并将其作为道具的链接.但是,Clickable(我实现它的方式)包装了Link一个,div以便它可以设置onMouseEnter和onMouseLeave它.这使得事情有点复杂(例如,span包裹在一个div不同的行为span).

有更简单的方法吗？

Answer 1

我认为onMouseEnter和onMouseLeave是可行的方法,但我认为不需要额外的包装器组件.这是我实现它的方式:

var Link = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else {
      linkStyle = {backgroundColor: 'blue'}
    }
    return(
      <div>
        <a style={linkStyle} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
}

然后,您可以使用悬停状态(true/false)来更改链接的样式.

Answer 2

我处于同样的境地.真的喜欢在组件中保持样式的模式,但悬停状态似乎是最后一道障碍.

我所做的是编写一个mixin,你可以将其添加到需要悬停状态的组件中.这个mixin将为hovered组件的状态添加一个新属性.它将被设置为true当用户将鼠标悬停在组件的主要DOM节点,并将其设置回false如果用户离开元素.

现在,在组件渲染功能中,您可以执行以下操作:

<button style={m(
     this.styles.container,
     this.state.hovered && this.styles.hover,
)}>{this.props.children}</button>

现在每次hovered状态改变时,组件都会重新渲染.

我还为此创建了一个沙盒仓库,我用它来测试一些这些模式.如果您想查看我的实现示例,请查看它.

https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin

Answer 3

您可以使用Radium - 它是使用ReactJS的内联样式的开源工具.它完全添加了您需要的选择器.非常受欢迎,请查看 - 镭星期二

Answer 4

这是使用 CSS 变量的另一种选择。这需要提前定义 css 悬停定义，所以我猜它不是纯粹的内联，但代码很少且灵活。

css（设置悬停状态）：

.p:hover:{
 color:var(--hover-color) !important,
 opacity:var(--hover-opacity)
}

反应：

<p style={{'color':'red','--hover-color':'blue','--hover-opacity':0.5}}>

Answer 5

这是我使用 React Hooks 的解决方案。它结合了扩展运算符和三元运算符。

样式.js

export default {
  normal:{
    background: 'purple',
    color: '#ffffff'
  },
  hover: {
    background: 'red'
  }
}

按钮.js

import React, {useState} from 'react';
import style from './style.js'

function Button(){

  const [hover, setHover] = useState(false);

  return(
    <button
      onMouseEnter={()=>{
        setHover(true);
      }}
      onMouseLeave={()=>{
        setHover(false);
      }}
      style={{
        ...style.normal,
        ...(hover ? style.hover : null)
      }}>

        MyButtonText

    </button>
  )
}

Answer 6

我找到了一种干净的方法来做到这一点useState，用一个包装器，我称之为useHover。
不需要额外的库/框架。

const App = () => {

    const hover = useHover({backgroundColor: "LightBlue"})

    return <p {...hover}>Hover me!</p>
}

包装器的代码：

function useHover(styleOnHover: CSSProperties, styleOnNotHover: CSSProperties = {})
{
    const [style, setStyle] = React.useState(styleOnNotHover);

    const onMouseEnter = () => setStyle(styleOnHover)
    const onMouseLeave = () => setStyle(styleOnNotHover)

    return {style, onMouseEnter, onMouseLeave}
}

请注意，useHover当组件未悬停时，样式有一个可选的第二个参数。

在这里尝试一下

Answer 7

完全CSS支持正是这个庞大的CSSinJS库的原因,为了有效地执行此操作,您需要生成实际的CSS,而不是内联样式.在更大的系统中,内联样式的响应速度要慢得多.免责声明 - 我维护JSS.

Answer 8

晚会，但要有解决方案。您可以使用“＆”为第n个Child等定义样式：

day: {
    display: "flex",
    flex: "1",
    justifyContent: "center",
    alignItems: "center",
    width: "50px",
    height: "50px",
    transition: "all 0.2s",
    borderLeft: "solid 1px #cccccc",

    "&:hover": {
      background: "#efefef"
    },
    "&:last-child": {
      borderRight: "solid 1px #cccccc"
    }
},

Answer 9

onMouseEnter={(e) => {
    e.target.style.backgroundColor = '#e13570';
    e.target.style.border = '2px solid rgb(31, 0, 69)';
    e.target.style.boxShadow = '-2px 0px 7px 2px #e13570';
}}
onMouseLeave={(e) => {
    e.target.style.backgroundColor = 'rgb(31, 0, 69)';
    e.target.style.border = '2px solid #593676';
    e.target.style.boxShadow = '-2px 0px 7px 2px #e13570';
}}

在样式或类中设置默认属性，然后调用 onMouseLeave() 和 onMouseEnter() 以创建悬停功能。

Answer 10

制作样式 - 部分 - 由于这个原因(其他人对其他库/语法的实现存在分歧,并且内联样式缺乏对属性值前缀的支持).相信我们应该能够简单地在JavaScript中编写CSS并拥有完全自包含的组件HTML-CSS-JS.使用ES5/ES6模板字符串,我们现在可以,它也可以!:)

npm install style-it --save

功能语法(JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .intro:hover {
        color: red;
      }
    `,
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    );
  }
}

export default Intro;

JSX语法(JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        .intro:hover {
          color: red;
        }
      `}

        <p className="intro">CSS-in-JS made simple -- just Style It.</p>
      </Style>
    );
  }
}

export default Intro;

Answer 11

关于样式化组件和react-router v4，您可以执行以下操作：

import {NavLink} from 'react-router-dom'

const Link = styled(NavLink)`     
  background: blue;

  &:hover {
    color: white;
  }
`

...
<Clickable><Link to="/somewhere">somewhere</Link></Clickable>

Answer 12

这对于在 React 组件中使用内联样式（以及使用 :hover CSS 函数）来说是一个很好的技巧：

...

<style>
  {`.galleryThumbnail.selected:hover{outline:2px solid #00c6af}`}
</style>

...

Answer 13

您可以只创建一个abstract悬停类，例如颜色。

.hoverClassColor:hover {
  color:var(--hover-color) !important;
}

然后对于您想要将鼠标悬停时的颜色更改为的所有元素red：

render() {
  return <a className={'hoverClassColor'} style={{'--hover-color':'red'}}>Test</a>
}

对我来说，它就像内联，因为这些类是抽象的，可以重用于您想要实现颜色悬停的所有元素。

Answer 14

结帐Typestyle如果您使用的是与做出反应打字稿。

以下是：hover的示例代码

import {style} from "typestyle";

/** convert a style object to a CSS class name */
const niceColors = style({
  transition: 'color .2s',
  color: 'blue',
  $nest: {
    '&:hover': {
      color: 'red'
    }
  }
});

<h1 className={niceColors}>Hello world</h1>

Answer 15

除了乔纳森（Jonathan）的答案，以下是涵盖焦点和活动状态的事件，以及使用onMouseOver而不是的情况，onMouseEnter因为如果您将事件应用到目标中的任何子元素，后者将不会冒泡。

var Link = React.createClass({

  getInitialState: function(){
    return {hover: false, active: false, focus: false}
  },

  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },

  toggleActive: function(){
    this.setState({active: !this.state.active})
  },

  toggleFocus: function(){
    this.setState({focus: !this.state.focus})
  },

  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else if (this.state.active) {
      linkStyle = {backgroundColor: 'blue'}
    } else if (this.state.focus) {
      linkStyle = {backgroundColor: 'purple'}
    } 

    return(
      <div>
        <a style={linkStyle} 
          onMouseOver={this.toggleHover} 
          onMouseOut={this.toggleHover} 
          onMouseUp={this.toggleActive} 
          onMouseDown={this.toggleActive} 
          onFocus={this.toggleFocus}> 
          Link 
        </a>
      </div>
    )
  }

Answer 16

简单的方法是使用三元运算符

var Link = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else {
      linkStyle = {backgroundColor: 'blue'}
    }
    return(
      <div>
        <a style={this.state.hover ? {"backgroundColor": 'red'}: {"backgroundColor": 'blue'}} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
  }

Answer 17

2022 年最简单的方法：useRef + 内联 onMouseOver/onMouseOut

例子：

 var bottomAtag = useRef(null)
    
   

...然后在里面返回(

 <a ref={bottomAtag} onMouseOver={() => bottomAtag.current.style.color='#0F0'} ...></a>