React의 인라인 CSS 스타일: 호버를 구현하는 방법

React의 인라인 CSS 스타일: 호버를 구현하는 방법

React의 인라인 CSS 패턴이 마음에 들어서 사용하기로 했습니다.

이렇게 하다, 하다, 하다, 하다, 이렇게 안 요.:hover및 유사한 셀렉터.그렇다면 인라인 CSS 스타일을 사용하여 하이라이트 온 호버를 구현하는 가장 좋은 방법은 무엇일까요?

# 중 하나는 #reactjs를 입니다.Clickable컴포넌트를 사용하여 다음과 같이 사용합니다.

<Clickable>
    <Link />
</Clickable>

Clickable 가지고 있다hovered설명 후 링크에 소품으로 전달합니다. 「」, 「」는ClickableLinkin a a a a div에, 「」를 설정할 수 .onMouseEnter ★★★★★★★★★★★★★★★★★」onMouseLeave 하는데.span div이 다르다span를 참조해 주세요.

더 간단한 방법은 없나요?

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)를 사용하여 링크 스타일을 변경할 수 있습니다.

파티에는 늦었지만 해결책을 찾아라.&를 사용하여 호버 N번째 아이 등에 대한 스타일을 정의할 수 있습니다.

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

저도 같은 상황에 놓여 있어요.구성 요소에서 스타일을 유지하는 패턴은 매우 좋지만 호버 상태는 마지막 장애물처럼 보입니다.

제가 한 일은 호버 상태가 필요한 컴포넌트에 추가할 수 있는 믹스인을 작성하는 것입니다.을 추가해 줍니다.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

Radium을 사용할 수 있습니다.Radium은 ReactJs와 함께 인라인 스타일을 위한 오픈 소스 도구입니다.필요한 실렉터를 정확하게 추가합니다.인기 많네, 확인해봐 - 라듐 on npm

다음은 리액트 훅을 사용한 솔루션입니다.산포 연산자와 삼원 연산자를 결합합니다.

style.displaces를 선택합니다.

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

완전한 CSS 지원이 바로 이 엄청난 양의 CSSinJ 라이브러리를 효율적으로 구현하기 위해 인라인 스타일이 아닌 실제 CSS를 생성해야 하는 이유입니다.또한 인라인 스타일은 큰 시스템에서는 반응이 훨씬 느립니다.면책사항 - JSS를 유지하고 있습니다.

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

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에는 컴포넌트가 정지되어 있지 않은 스타일에 대한 두 번째 파라미터(선택사항)가 있습니다.

여기서 시험해 보세요.

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

Jonathan의 답변에 덧붙여, 여기 초점 및 활성 상태, 그리고 사용법을 다루는 이벤트가 있습니다.onMouseOveronMouseEnter이벤트가 적용되는 대상 내에 하위 요소가 있는 경우 후자는 버블되지 않습니다.

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

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()를 호출하여 호버 기능을 만듭니다.

유형 스크립트를 사용하여 반응을 사용하는 경우 유형을 확인합니다.

다음은: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>

스타일 컴포넌트 및 리액트 라우터 v4에 대해서는 다음과 같이 할 수 있습니다.

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

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

  &:hover {
    color: white;
  }
`

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

이것은 리액트 컴포넌트 내부에 인라인 스타일을 가지기 위한 훌륭한 해킹이 될 수 있습니다(및 :hover CSS 함수:

...

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

...

간단한 방법은 3진 연산자를 사용하는 것입니다.

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

대신 css 모듈을 사용할 수 있습니다.또한 클래스 이름 매핑에 react-css-modules를 사용할 수도 있습니다.

이렇게 하면 다음과 같이 스타일을 Import하여 컴포넌트에 로컬로 스코프된 일반 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 모듈의 예를 나타냅니다.

setState를 사용한 onMouseOver와 onMouseLeave는 처음에는 다소 오버헤드로 느껴졌지만 리액션이 이렇게 작동하기 때문에 가장 쉽고 깨끗한 솔루션인 것 같습니다.

예를 들어, 대상 css 서버를 외부에 렌더링하는 것도 좋은 솔루션이며 반응 컴포넌트를 보다 깨끗하게 유지합니다.

동적 스타일을 요소에 추가할 필요가 없는 경우(예를 들어 inline style을 전혀 사용하지 않고 대신 css 클래스를 사용해야 합니다.

이것은 html/JSX를 깨끗하고 단순하게 유지하기 위한 기존의 html/css 규칙입니다.

이것은 material-ui로 쉽게 얻을 수 있다. makeStyles★★★★

import { makeStyles } from '@material-ui/core/styles';

makeStyles({
  root: {
    /* … */
    '&:hover': { /* … */ }
  },
});

타이프 스크립트로 작성된 호버 범용 래퍼입니다.이 구성 요소는 호버 이벤트에서 소품 'hoverStyle'을 통해 전달되는 스타일을 적용합니다.

import React, { useState } from 'react';

export const Hover: React.FC<{
  style?: React.CSSProperties;
  hoverStyle: React.CSSProperties;
}> = ({ style = {}, hoverStyle, children }) => {
  const [isHovered, setHovered] = useState(false);
  const calculatedStyle = { ...style, ...(isHovered ? hoverStyle : {}) };
  return (
    <div
      style={calculatedStyle}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {children}
    </div>
  );
};    

저는 이와 비슷한 일을 했습니다만, material-ui나 make Styles는 사용하지 않습니다.스타일 오브젝트의 css에 조건으로 호버를 추가했습니다.

const styles = {
  hoverStyle: {
    color: 'grey',
    '&:hover': { color: 'blue !important' },
  }
};

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

  return (
    <div>
      <div>
        {menuOptions.map((page) => <div style={styles.hoverStyle} key={page}>{page}</div> )}
      </div>
    </div>
  );
};

이건 나한테 효과가 있었어.

'만들다'를 요.abstract★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★♪

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

다음 에 대해 을 "하다"로 합니다.red[ ] :

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

인라인과 마찬가지로 클래스는 추상적이고 색상 호버링을 구현하는 모든 요소에 재사용할 수 있기 때문입니다.

인라인 스타일과 css를 혼합하여 다음 방법을 사용합니다.

//inline-style:
const button = {
  fontSize: "2em",
};
return (
  <div style={button} data-hover="button">
    <style>{`[data-hover="button"]:hover {
        font-size: 2.1em !important;
    }`}</style>
    {this.props.text}
  </div>
);

가장 쉬운 방법 2022: useRef + inline on MouseOver / on MouseOut

예:

 var bottomAtag = useRef(null)
    
   

...내부 반환(

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

후크 사용 시:

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

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

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

저는 제 목적에 맞는 최신 애플리케이션 중 하나에서 이 문제를 해결하기 위해 매우 해킹적인 솔루션을 사용하고 있으며, 커스텀 호버 설정 함수를 바닐라 js로 작성하는 것보다 더 빠릅니다(대부분의 환경에서는 베스트 프랙티스가 아닐 수도 있습니다).그래서 아직 관심이 있는 경우를 대비해서 설명하겠습니다.

인라인 javascript 스타일을 유지하기 위해서만 부모 요소를 만들고 css 스타일시트가 래치되는 className 또는 ID를 가진 아이를 만들고 전용 css 파일에 호버 스타일을 씁니다.이는 보다 세밀한 하위 요소가 상속을 통해 인라인 js 스타일을 수신하지만 해당 호버 스타일은 css 파일에 의해 덮어쓰기되기 때문입니다.

따라서 기본적으로 실제 css 파일은 호버 효과를 유지하기 위한 목적으로만 존재합니다.이를 통해 매우 간결하고 관리하기 쉬우며 인라인 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>

"자녀" 인라인 스타일에는 "컬러" 속성이 설정되어 있지 않습니다.그러면 인라인 스타일이 스타일시트보다 우선하기 때문에 작동하지 않습니다.

이것이 정답인지 100% 확신할 수는 없지만, 컬러와 이미지를 인라인으로 사용하여 CSS:hover 효과를 시뮬레이션하기 위해 사용하는 트릭입니다.

`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

다음은 기능 컴포넌트에 후크를 사용하여 수행하는 방법입니다.와 함께onMouseEnter/Leave색상을 직접 상태로 설정하고 요소의 스타일 프로포트에서 소비합니다(앞의 답변과 같이 호버 상태를 설정하고 3진수를 사용하여 상태를 변경하는 것을 제외).

function App() {
  const [col, setCol] = React.useState('white');

  return (
    <div className="App">
      <button
        style={{background: `${col}`}}
        onMouseEnter={() => setCol("red")}
        onMouseLeave={() => setCol("white")}
      >
        Red
      </button>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>

이 솔루션에서는 스타일시트를 사용합니다.그러나 응용 프로그램에서 index.css - 즉, 최상위 컴포넌트로 Import되는 스타일시트가 있는 경우 다음 코드를 여기에 쓸 수 있습니다.

.hoverEffect:hover {
 //add some hover styles
}

그런 다음 React 구성 요소에서 className "hoverEffect"를 추가하여 호버 효과를 "inline"으로 적용합니다.

호버 상태를 소품으로 전달하고 하위 구성 요소에만 적용하려면 index.css에서 :hover를 삭제하고 대신 이 작업을 수행하십시오.

function Link(props) {
  return (
    <a className={props.isHovered ? "hoverEffect" : ""}>Hover me<a/>
  )
}

다음과 같이 컴포넌트에서 태그를 직접 사용합니다.

<Wrapper>
  <style>
   .custom-class{
       // CSS here
   }
   .custom-class:hover{
     //query selector
   }
  </style>
  <div className="custom-class"></div>
</Wrapper> 

언급URL : https://stackoverflow.com/questions/28365233/inline-css-styles-in-react-how-to-implement-ahover