Gaya CSS sebaris dalam Bereaksi: bagaimana cara menerapkan: hover?

Saya sangat menyukai pola CSS inline di Bereaksi dan memutuskan untuk menggunakannya.

Namun, Anda tidak dapat menggunakan :hoverpemilih dan sejenisnya. Jadi apa cara terbaik untuk mengimplementasikan highlight-on-hover saat menggunakan gaya CSS sebaris?

Satu saran dari #reactjs adalah memiliki Clickablekomponen dan menggunakannya seperti ini:

<Clickable>
    <Link />
</Clickable>

The Clickablememiliki hoverednegara dan dibagikan sebagai alat peraga untuk Link tersebut. Namun, Clickable(cara saya mengimplementasikannya) membungkus Linkdalam divsehingga dapat diatur onMouseEnterdan onMouseLeaveuntuk itu. Ini membuat hal-hal sedikit rumit (misalnya spandibungkus divberperilaku berbeda dari span).

Apakah ada cara yang lebih sederhana?

Saya dalam situasi yang sama. Benar-benar menyukai pola menjaga styling di komponen tetapi keadaan hover sepertinya merupakan rintangan terakhir.

Apa yang saya lakukan adalah menulis mixin yang dapat Anda tambahkan ke komponen Anda yang membutuhkan status hover. Mixin ini akan menambah hoveredproperti baru ke status komponen Anda. Ini akan diatur ke truejika pengguna melayang di atas simpul DOM utama dari komponen dan mengatur kembali falsejika pengguna meninggalkan elemen.

Sekarang dalam fungsi render komponen Anda, Anda dapat melakukan sesuatu seperti:

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

Sekarang setiap kali hoveredstatus perubahan komponen akan rerender.

Saya juga membuat repo kotak pasir untuk ini yang saya gunakan untuk menguji beberapa pola ini sendiri. Periksa jika Anda ingin melihat contoh implementasi saya.

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

Saya pikir onMouseEnter dan onMouseLeave adalah cara untuk pergi, tapi saya tidak melihat perlunya komponen pembungkus tambahan. Inilah cara saya mengimplementasikannya:

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>
    )
}

Anda kemudian dapat menggunakan status hover (benar / salah) untuk mengubah gaya tautan.

Terlambat ke pesta tetapi datang dengan solusi. Anda dapat menggunakan "&" untuk menentukan gaya untuk mengarahkan anak ke lain-lain dll:

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"
    }
},

Anda dapat menggunakan Radium - ini adalah alat sumber terbuka untuk gaya sebaris dengan ReactJS. Ia menambahkan persis pemilih yang Anda butuhkan. Sangat populer, coba lihat - Radium on npm

Dukungan penuh CSS adalah alasan utama jumlah besar perpustakaan CSSinJS ini, untuk melakukan ini secara efisien, Anda perlu menghasilkan CSS yang sebenarnya, bukan gaya inline. Gaya inline juga jauh lebih lambat dalam bereaksi dalam sistem yang lebih besar. Penafian - Saya memelihara JSS .

Made Style It - sebagian - karena alasan ini (yang lain tidak setuju dengan implementasi lib / sintaks lain dan inline stylings kurangnya dukungan untuk awalan nilai properti). Percayalah kita harus bisa hanya menulis CSS dalam JavaScript dan memiliki komponen yang sepenuhnya lengkap HTML-CSS-JS. Dengan string template ES5 / ES6 kita sekarang dapat dan itu bisa sangat cantik! :)

npm install style-it --save

Sintaks Fungsional ( 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;

Sintaks 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;

Menambahkan ke jawaban Jonathan , berikut adalah acara untuk membahas fokus dan status aktif, dan penggunaan onMouseOveralih-alih onMouseEnterkarena yang terakhir tidak akan menggelembung jika Anda memiliki elemen anak dalam target acara yang sedang diterapkan.

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>
    )
  }

Inilah solusi saya menggunakan React Hooks. Ini menggabungkan operator spread dan operator ternary.

style.js

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

Button.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>
  )
}

Berkenaan dengan komponen yang ditata dan react-router v4 Anda dapat melakukan ini:

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

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

  &:hover {
    color: white;
  }
`

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

Ini bisa menjadi peretasan yang bagus karena memiliki gaya inline di dalam komponen reaksi (dan juga menggunakan: hover fungsi CSS):

...

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

...

Checkout Typestyle jika Anda menggunakan Bereaksi dengan Teks.

Di bawah ini adalah contoh kode untuk: 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>

Anda dapat menggunakan modul css sebagai alternatif, dan juga bereaksi-css-modul untuk pemetaan nama kelas.

Dengan begitu Anda dapat mengimpor gaya Anda sebagai berikut dan menggunakan css normal yang dicakup secara lokal ke komponen Anda:

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

class Table extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

export default CSSModules(Table, styles);

Berikut adalah contoh modul css webpack

onMouseOver dan onMouseLeave dengan setState pada awalnya sepertinya sedikit berlebihan bagi saya - tetapi karena ini adalah bagaimana reaksinya bekerja, sepertinya solusi termudah dan terbersih bagi saya.

rendering theming css serverside misalnya, juga merupakan solusi yang baik dan menjaga komponen reaksi lebih bersih.

jika Anda tidak perlu menambahkan gaya dinamis ke elemen (misalnya untuk tema), Anda tidak boleh menggunakan gaya inline sama sekali, tetapi gunakan kelas css.

ini adalah aturan html / css tradisional untuk menjaga html / JSX tetap bersih dan sederhana.

Cara sederhana menggunakan operator ternary

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>
    )
  }

Dengan menggunakan kait:

const useFade = () => {
  const [ fade, setFade ] = useState(false);

  const onMouseEnter = () => {
    setFade(true);
  };

  const onMouseLeave = () => {
    setFade(false);
  };

  const fadeStyle = !fade ? {
    opacity: 1, transition: 'all .2s ease-in-out',
  } : {
    opacity: .5, transition: 'all .2s ease-in-out',
  };

  return { fadeStyle, onMouseEnter, onMouseLeave };
};

const ListItem = ({ style }) => {
  const { fadeStyle, ...fadeProps } = useFade();

  return (
    <Paper
      style={{...fadeStyle, ...style}}
      {...fadeProps}
    >
      {...}
    </Paper>
  );
};

Saya menggunakan solusi hack-ish yang cukup untuk ini di salah satu aplikasi terbaru saya yang berfungsi untuk tujuan saya, dan saya menemukan ini lebih cepat daripada menulis fungsi pengaturan hover kustom di vanilla js (meskipun, saya tahu, mungkin bukan praktik terbaik di sebagian besar lingkungan ..) Jadi, jika Anda masih tertarik, ini dia.

Saya membuat elemen induk hanya untuk menahan gaya javascript inline, lalu seorang anak dengan className atau id yang stylesheet css saya akan latch ke dan menulis gaya hover di file css khusus saya. Ini berfungsi karena elemen anak yang lebih granular menerima gaya js inline melalui pewarisan, tetapi memiliki gaya hover ditimpa oleh file css.

Jadi pada dasarnya, file css saya yang sebenarnya ada hanya untuk tujuan menahan efek hover, tidak ada yang lain. Ini membuatnya cukup ringkas dan mudah dikelola, dan memungkinkan saya melakukan pekerjaan berat dalam gaya komponen Bereaksi in-line saya.

Ini sebuah contoh:

const styles = {
  container: {
    height: '3em',
    backgroundColor: 'white',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    borderBottom: '1px solid gainsboro',
  },
  parent: {
    display: 'flex',
    flex: 1,
    flexDirection: 'row',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    color: 'darkgrey',
  },
  child: {
    width: '6em',
    textAlign: 'center',
    verticalAlign: 'middle',
    lineHeight: '3em',
  },
};

var NavBar = (props) => {
  const menuOptions = ['home', 'blog', 'projects', 'about'];

  return (
    <div style={styles.container}>
      <div style={styles.parent}>
        {menuOptions.map((page) => <div className={'navBarOption'} style={styles.child} key={page}>{page}</div> )}
      </div>
    </div>
  );
};


ReactDOM.render(
  <NavBar/>,
  document.getElementById('app')
);

.navBarOption:hover {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

Perhatikan bahwa gaya inline "child" tidak memiliki set properti "warna". Jika ya, ini tidak akan berhasil karena gaya inline akan diutamakan di atas stylesheet saya.

Saya tidak 100% yakin apakah ini jawabannya, tetapi ini trik yang saya gunakan untuk mensimulasikan CSS: efek hover dengan warna dan gambar sejajar.

`This works best with an image`

class TestHover extends React.PureComponent {
render() {
const landingImage = {     
"backgroundImage": "url(https://i.dailymail.co.uk/i/pix/2015/09/01/18/2BE1E88B00000578-3218613-image-m-5_1441127035222.jpg)",
"BackgroundColor": "Red", `this can be any color`
"minHeight": "100%",
"backgroundAttachment": "fixed",
"backgroundPosition": "center",
"backgroundRepeat": "no-repeat",
"backgroundSize": "cover", 
"opacity": "0.8", `the hove trick is here in the opcaity slightly see through gives the effect when the background color changes`
    }

  return (
    <aside className="menu">
        <div className="menu-item">
          <div style={landingImage}>SOME TEXT</div>
        </div>
    </aside>
      ); 
  }
}
ReactDOM.render(
    <TestHover />,
  document.getElementById("root")
);

CSS:

.menu {
top: 2.70em;
bottom: 0px;
width: 100%;
position: absolute;
}

.menu-item {
cursor: pointer;
height: 100%;
font-size: 2em;
line-height: 1.3em;
color: #000;
font-family: "Poppins";
font-style: italic;
font-weight: 800;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}

Sebelum melayang

.menu-item:nth-child(1) {
color: white;
background-color: #001b37;
} 

Saat melayang

.menu-item:nth-child(1):hover {
color: green;
background-color: white;
}

Contoh: https://codepen.io/roryfn/pen/dxyYqj?editors=0011

<Hoverable hoverStyle={styles.linkHover}>
  <a href="https://example.com" style={styles.link}>
    Go
  </a>
</Hoverable>

Di mana Hoverable didefinisikan sebagai:

function Hoverable(props) {
  const [hover, setHover] = useState(false);

  const child = Children.only(props.children);

  const onHoverChange = useCallback(
    e => {
      const name = e.type === "mouseenter" ? "onMouseEnter" : "onMouseLeave";
      setHover(!hover);
      if (child.props[name]) {
        child.props[name](e);
      }
    },
    [setHover, hover, child]
  );

  return React.cloneElement(child, {
    onMouseEnter: onHoverChange,
    onMouseLeave: onHoverChange,
    style: Object.assign({}, child.props.style, hover ? props.hoverStyle : {})
  });
}