इनलाइन CSS स्टाइल इन रिएक्ट: कैसे लागू करें: होवर?

Question

मैं रिएक्ट में इनलाइन सीएसएस पैटर्न को काफी पसंद करता हूं और इसे इस्तेमाल करने का फैसला किया है।

हालाँकि, आप :hoverऔर समान चयनकर्ताओं का उपयोग नहीं कर सकते । तो इनलाइन सीएसएस शैलियों का उपयोग करते समय हाइलाइट-ऑन-होवर को लागू करने का सबसे अच्छा तरीका क्या है?

#Reactjs से एक सुझाव है कि एक Clickableघटक है और इसे इस तरह उपयोग करें:

<Clickable>
    <Link />
</Clickable>

की Clickableएक hoveredअवस्था होती है और इसे लिंक के रूप में सहारा देता है। हालांकि, Clickable(जिस तरह से मैंने इसे लागू किया है) एक लपेटता Linkहै divताकि यह सेट हो सके onMouseEnterऔर onMouseLeaveइसे। यह हालांकि चीजों को थोड़ा जटिल बनाता है (उदाहरण के लिए अलग व्यवहार spanमें लिपटे हुए )।divspan

क्या कोई सरल तरीका है?

Comments

आप बिल्कुल सही हैं - अनुकरण करने का एकमात्र तरीका: इनलाइन शैलियों के साथ होवर आदि चयनकर्ताओं का उपयोग करना onMouseEnterऔर है onMouseLeave। उस के सटीक कार्यान्वयन के बारे में - यह पूरी तरह से आप पर निर्भर है। अपने विशिष्ट उदाहरण को देखने के लिए, <Clickable/>आवरण को क्यों नहीं बनाया जाए span?

— क्रिस ह्यूटन

मैं एक्सट्रैक्टटैक्स वेबपैक प्लगइन के साथ-साथ बाहरी स्टाइल शीट का उपयोग करने का सुझाव दूंगा, यह आपको लंबे समय तक चलाने में मदद करेगा यदि आप कभी भी

— सर्वररेंडर

वर्तमान में स्टाइल कॉम्पोनेन्ट प्रतिक्रिया में css / scss की सभी संभावनाओं को अनुकरण करने के लिए सबसे अच्छा समाधान है।

— अहमद बेहज़ादी

Answer 1

मैं उसी स्थिति में हूं। वास्तव में स्टाइल को घटकों में रखने के पैटर्न की तरह लेकिन होवर राज्यों को अंतिम बाधा की तरह लगता है।

मैंने जो किया वह एक मिक्सिन लिख रहा था जिसे आप अपने कंपोनेंट में शामिल कर सकते हैं जिसमें हॉवर स्टेट्स की जरूरत है। यह मिश्रण hoveredआपके घटक की स्थिति में एक नई संपत्ति जोड़ देगा । यह करने के लिए स्थापित किया जाएगा trueघटक और सेट के मुख्य डोम नोड पर उपयोगकर्ता होवर इसे करने के लिए वापस अगर 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

Comments

लंबे समय तक चलने के लिए एक अच्छा समाधान नहीं, रेडियम बेहतर विकल्प होगा या बाहरी स्टाइलशीट का उपयोग करना होगा

— abhirathore2006

@ abhirathore2006 रेडियम एक ही तरह से काम करता है और सवाल विशेष रूप से एक बाहरी स्टाइलशीट का उपयोग किए बिना यह कैसे करना है

— चार्ली मार्टिन

यह एक वैनिला प्रसार ऑपरेटर का उपयोग करने के लिए और अधिक समझ नहीं होगा?

— PAT-O-MATION

Answer 2

मुझे लगता है कि 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>
    )
}

फिर आप लिंक की शैली को बदलने के लिए हॉवर की स्थिति (सही / गलत) का उपयोग कर सकते हैं।

Comments

यह कवर करने के लिए प्रतीत होता है :hoverलेकिन नहीं:focus

— एडम ट्यूटल

@AdamTuttle प्रतिक्रिया में एक onFocusघटना है; तो आप के लिए एक ही बात कर सकता है :focusके रूप में :hover, बजाय की आवश्यकता होगी, के अलावा onMouseEnterऔर onMouseLeaveआप केवल आवश्यकता होगीonFocus

— जोनाथन

विदित हो कि यह विधि मुख्य सूत्र पर अमल को बल देती है जबकि विशिष्ट सीएसएस घटनाओं को बहुत अधिक कुशलता से नियंत्रित किया जाता है।

— हम्पस अहलग्रेन

Answer 3

पार्टी करने के लिए देर से लेकिन समाधान के साथ आते हैं। आप "और" का उपयोग कर सकते हैं, आदि के लिए शैलियों को परिभाषित करना

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

Comments

यह एक समाधान नहीं है, सवाल यह था कि इसे ऑनलाइन स्टाइल सीएसएस के साथ कैसे किया जाए, अलग स्टाइल शीट के साथ नहीं।

— एमी

यार, जरा गौर से देखना। यह इनलाइन शैली है।

— जारोस्लाव व्लाज़ेलो

यह प्रतिक्रिया के साथ काम नहीं करता है। आपको स्टाइल-घटकों की तरह एक अतिरिक्त पुस्तकालय की आवश्यकता है।

— जी.जी.

यह इनलाइन शैली के साथ काम नहीं करता है, यह उदाहरण भ्रम लाता है। यदि यह वास्तव में काम कर रहा है, तो कृपया पूर्ण घटक के साथ एक बेहतर उदाहरण प्रदान करें।

— अलेक्जेंड्रे

अति उत्कृष्ट! एक जादू की तरह काम करता है!

— फ्योदोर

Answer 4

आप रेडियम का उपयोग कर सकते हैं - यह ReactJS के साथ इनलाइन शैलियों के लिए एक खुला स्रोत उपकरण है। यह वास्तव में चयनकर्ताओं को आपकी आवश्यकता के अनुसार जोड़ता है। बहुत लोकप्रिय है, इसे जांचें - एनपीएम पर रेडियम

Comments

मैं अभी इस पोस्ट पर आया हूं, आप निम्नलिखित स्थिति में रेडियम को कैसे लागू करेंगे? module.exports = React.createClass({ displayName: 'App',})

@Rkhayat आप या तो इसे लपेट सकते हैं या module.exports = Radium(React.createClass({ displayName: 'App',}))कक्षा को एक मान प्रदान कर सकते हैं और @Radiumइसके ऊपर डेकोरेटर जोड़ सकते हैं क्योंकि डॉक्स github.com/FormidableLabs/radium#usage

— pbojinov

CSS;)

— Pixelomo

Answer 5

पूर्ण CSS समर्थन बिल्कुल यही कारण है कि CSSinJS पुस्तकालयों की यह बड़ी राशि, कुशलतापूर्वक ऐसा करने के लिए, आपको वास्तविक सीएसएस उत्पन्न करने की आवश्यकता है, इनलाइन शैलियों की नहीं। इसके अलावा इनलाइन शैलियों एक बड़ी प्रणाली में प्रतिक्रिया में बहुत धीमी हैं। अस्वीकरण - मैं जेएसएस को बनाए रखता हूं ।

Answer 6

मेड स्टाइल इट - इन पार्ट - इस वजह से (अन्य लोगों के कार्यान्वयन के साथ असहमति होने के कारण / उपसर्ग और इनलाइन स्टाइलिंग में संपत्ति के मूल्यों के पूर्व समर्थन के लिए समर्थन की कमी है)। विश्वास करें कि हमें केवल जावास्क्रिप्ट में सीएसएस लिखने में सक्षम होना चाहिए और पूरी तरह से स्व-निहित घटक 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;

Comments

मैंने JSX सिंटैक्स उदाहरण पर ध्यान दिया, JSFiddle लिंक में सही कोड है, लेकिन यहां दिखाया गया उदाहरण क्लोजिंग स्टाइल टैग के बाद समापन कोष्ठक को याद कर रहा है और लापता कोष्ठक के कारण इंडेंटेशन संभवतः बंद है।

— bradleygsmith

Answer 7

करने के लिए पर जोड़ने जोनाथन का जवाब है, यहाँ की घटनाओं फोकस और सक्रिय राज्यों को कवर करने के लिए कर रहे हैं, और एक का उपयोग कर 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 8

यहाँ रिएक्ट हुक का उपयोग करके मेरा समाधान है। यह प्रसार ऑपरेटर और टर्नरी ऑपरेटर को जोड़ती है।

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

Answer 9

के संबंध में स्टाइल घटकों और प्रतिक्रिया रूटर v4 आप यह कर सकते हैं:

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

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

  &:hover {
    color: white;
  }
`

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

Answer 10

यह एक प्रतिक्रिया घटक के अंदर इनलाइन शैली होने के लिए एक अच्छा हैक हो सकता है (और उपयोग भी: hover सीएसएस समारोह):

...

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

...

Answer 11

यदि आप टाइपस्क्रिप्ट के साथ प्रतिक्रिया का उपयोग कर रहे हैं तो चेकआउट टाइपस्टाइल ।

नीचे के लिए एक नमूना कोड है: होवर

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 12

आप वैकल्पिक नाम के रूप में सीएसएस मॉड्यूल का उपयोग कर सकते हैं , और इसके अलावा वर्ग नाम मानचित्रण के लिए प्रतिक्रिया-सीएसएस-मॉड्यूल कर सकते हैं ।

इस प्रकार आप अपनी शैली को निम्न प्रकार से आयात कर सकते हैं और अपने घटकों के लिए स्थानीय स्तर पर स्कूप की गई सामान्य सीएसएस का उपयोग कर सकते हैं:

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 मॉड्यूल उदाहरण है

Comments

FYI करें: यदि आप उल्का का उपयोग कर रहे हैं तो इस पैकेज को देखें: github.com/nathantreid/meteor-css-modules । मैं अब तक इसका उपयोग खुद कर रहा हूं।

— स्पिरालिस

यह घटकों को प्रतिक्रिया देने की शैली का एक शानदार तरीका है, लेकिन आपको इनलाइन शैलियों के सभी नियंत्रण नहीं देता है। उदाहरण के लिए, आप :hoverरेडियम या किसी अन्य onMouseOverआधारित समाधान के साथ रनटाइम पर शैलियों को नहीं बदल सकते हैं

— चार्ली मार्टिन

Answer 13

onMouseOver और onMouseLeave पहले सेटस्टैट के साथ मेरे लिए ओवरहेड की तरह लग रहे थे - लेकिन जैसा कि इस पर प्रतिक्रिया काम करती है, यह मेरे लिए सबसे आसान और सबसे साफ समाधान लगता है।

उदाहरण के लिए एक थीमिंग सीएसएस सर्वरसाइड प्रदान करना भी एक अच्छा समाधान है और प्रतिक्रिया घटकों को अधिक साफ रखता है।

अगर आपको तत्वों के लिए गतिशील शैलियों को जोड़ना नहीं है (उदाहरण के लिए एक थीमिंग के लिए) तो आपको इनलाइन शैलियों का उपयोग बिल्कुल नहीं करना चाहिए बल्कि इसके बजाय सीएसएस कक्षाओं का उपयोग करना चाहिए।

यह html / JSX को साफ और सरल रखने के लिए एक पारंपरिक html / css नियम है।

Answer 14

सरल तरीका टर्नरी ऑपरेटर का उपयोग कर रहा है

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 15

हुक के उपयोग के साथ:

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

Answer 16

मैं अपने हाल के अनुप्रयोगों में अपने उद्देश्यों के लिए काम करने वाले एक बहुत ही हैक-ईश समाधान का उपयोग करता हूं, और मुझे वेनिला जेएस में कस्टम होवर सेटिंग्स फ़ंक्शन लिखने की तुलना में तेज लगता है (हालांकि, मुझे पता है, शायद अधिकांश वातावरण में सबसे अच्छा अभ्यास नहीं है। ..) तो, अगर आप अभी भी रुचि रखते हैं, तो यहाँ जाता है।

मैं इनलाइन जावास्क्रिप्ट स्टाइल रखने के लिए सिर्फ एक मूल तत्व बनाता हूं, फिर एक क्लासनेम या आईडी वाला एक बच्चा जो मेरी सीएसएस स्टाइलशीट खोलेगा और अपनी समर्पित सीएसएस फाइल में होवर स्टाइल लिखेगा। यह काम करता है क्योंकि अधिक दानेदार बाल तत्व वंशानुक्रम के माध्यम से इनलाइन जेएस शैलियों को प्राप्त करता है, लेकिन इसकी हॉवर शैली सीएसएस फ़ाइल द्वारा ओवरराइड की जाती है।

तो मूल रूप से, मेरी वास्तविक सीएसएस फ़ाइल हॉवर प्रभाव रखने के एकमात्र उद्देश्य के लिए मौजूद है, और कुछ नहीं। यह इसे बहुत संक्षिप्त और प्रबंधन करने में आसान बनाता है, और मुझे अपने इन-लाइन रिएक्ट घटक शैलियों में भारी उठाने की अनुमति देता है।

यहाँ एक उदाहरण है:

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>

ध्यान दें कि "बच्चे" इनलाइन शैली में "रंग" संपत्ति सेट नहीं है। यदि ऐसा होता है, तो यह काम नहीं करेगा क्योंकि इनलाइन शैली मेरी शैली पत्रक पर पूर्वता लेगी।

Answer 17

अगर यह जवाब है तो मुझे 100% यकीन नहीं है, लेकिन इसका उपयोग मैं सीएसएस को अनुकरण करने के लिए करता हूं: रंगों और इनलाइन के साथ हॉवर प्रभाव।

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

सीएसएस:

.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

Answer 18

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