Вбудовані стилі CSS в React: як реалізувати a: наведення курсора?

Мені дуже подобається вбудований CSS-шаблон в React і вирішив його використовувати.

Однак ви не можете використовувати :hoverселектори та подібні. Отже, який найкращий спосіб реалізувати підсвічування під час використання вбудованих стилів CSS?

Одне з пропозицій від #reactjs - мати Clickableкомпонент і використовувати його так:

<Clickable>
    <Link />
</Clickable>

Стан Clickableмає hoveredстан і передає його як реквізит Посилання. Однак, Clickable(як я реалізував її) обгортання Linkв divтакий спосіб , щоб його можна встановити onMouseEnterі onMouseLeaveна нього. Це робить речі дещо складнішими (наприклад, spanзагорнутий у divповедінку по-іншому ніж span).

Чи є простіший спосіб?

Я в тій же ситуації. Дійсно подобається схема збереження стилю в компонентах, але наведення стану здається, як остання перешкода.

Що я зробив, це писати міксин, який ви можете додати до свого компонента, який потребує стану наведення. Цей міксин додасть нового 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

Я думаю, що 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>
    )
}

Потім ви можете використовувати стан наведення (істинне / хибне), щоб змінити стиль посилання.

Пізно до вечірки, але приходьте до рішення. Ви можете використовувати "&" для визначення стилів для наведення nth 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"
    }
},

Ви можете використовувати Radium - це інструмент з відкритим кодом для стилів вбудованих стилів з ReactJS. Він додає саме потрібні вам селектори. Дуже популярний, перевірте це - Радій на npm

Повна підтримка CSS - це саме причина цієї величезної кількості бібліотек CSSinJS, щоб зробити це ефективно, вам потрібно генерувати фактичні CSS, а не вбудовані стилі. Також стилі вбудованого типу набагато повільніше реагують у більшій системі. Відмова - я підтримую JSS .

Здійснено стиль Style - частково - з цієї причини (інші - це незгоди з реалізацією інших libs / синтаксису та вбудованих стилів (відсутність підтримки для префіксації значень властивостей)). Повірте, ми повинні мати можливість просто писати CSS в JavaScript і мати повністю автономні компоненти 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;

Додавши до відповіді Джонатана , ось події для висвітлення фокусу та активних станів, а використання 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>
    )
  }

Ось моє рішення за допомогою React Hooks. Він поєднує оператор розповсюдження та потрійний оператор.

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

Що стосується стильових компонентів та реактора-маршрутизатора v4, ви можете зробити це:

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

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

  &:hover {
    color: white;
  }
`

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

Це може бути хорошим хаком для того, щоб мати стиль вбудованого тексту в реагуючому компоненті (а також використовувати: навести курсор CSS-функції):

...

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

...

Оформити замовлення Typestyle якщо ви використовуєте React with Typescript.

Нижче наведено зразок коду для: наведення курсора

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>

Ви можете використовувати модулі css як альтернативу та додатково react-css-модулі для відображення імен класів.

Таким чином ви можете імпортувати свої стилі наступним чином і використовувати звичайний css-код, локально встановлений для своїх компонентів:

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

Ось приклад CSS модулів веб- упаковки

onMouseOver і onMouseLeave з setState спочатку здалися мені трохи накладними, але оскільки так реагує, мені здається найпростішим і чистішим рішенням.

наприклад, надання тематичного CSS-сервера, також є хорошим рішенням і підтримує більш чисті компоненти реакції.

якщо вам не потрібно додавати динамічні стилі до елементів (наприклад, для тематизації), ви взагалі не повинні використовувати вбудовані стилі, а натомість використовувати класи css.

Це традиційне правило html / css, щоб підтримувати html / JSX чистим та простим.

Простий спосіб - використання потрійного оператора

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

За допомогою гачків:

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

Я використовую досить гарне рішення для цього в одному з моїх останніх додатків, що працює для моїх цілей, і я вважаю, що це швидше, ніж написання спеціальних функцій налаштування курсору у ванілі js (хоча, я визнаю, можливо, це не найкраща практика в більшості середовищ ..) Отже, на випадок, якщо ви все-таки зацікавлені, тут іде.

Я створюю батьківський елемент лише для того, щоб утримувати вбудовані стилі JavaScript, потім дитина з класним іменем або ідентифікатором, на який мій таблиця стилів css зав'яжеться, і напише стиль наведення в мій виділений файл css. Це працює тому, що більш деталізований дочірній елемент отримує вбудовані js стилі у спадок, але має свої стилі наведення курсору, перекриті файлом css.

Таким чином, мій фактичний файл css існує лише з метою проведення ефектів наведення, більше нічого. Це робить його досить стислим і простим в управлінні, і дозволяє мені робити важкі підйоми в моїх стильових компонентах In-line React.

Ось приклад:

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>

Зауважте, що в стилі "child" inline немає набору властивостей "color". Якби це було, це не спрацювало, тому що стиль вбудованої системи мав би перевагу над моєю таблицею стилів.

Я не на 100% впевнений, що це відповідь, але її хитрість я використовую для імітації CSS: ефект наведення курсором із кольорами та зображеннями в рядку.

`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;
}

Перш ніж навести курсор

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

На наведення

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

Приклад: https://codepen.io/roryfn/pen/dxyYqj?editors=0011

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

Де Поважний визначається як:

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 : {})
  });
}