web-dev-qa-db-ja.com

ボタンなどの反応コンポーネントでアクティブなホバーなどの複雑な反応インラインスタイルの設定

ボタンのCSSには次のスタイルがあります。ブートストラップも使用しています。

.btn-primary {
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
    background-color: #1f90bb;
    background-position: 0 -15px;
}

反応のコンポーネントとしてボタンを定義しました。

const MyButton = ({children, onClick, classNames, ...rest }) =>
(
    <button
        onClick   = {onClick}
        className = {`${classNames}`}
        {...rest}
    >
        {children}
    </button>
);

サーバーから取得した値に基づいて、ボタンの完全な色を変更します。

質問1：

ボタンの完全なスタイルをインラインスタイルとして設定するにはどうすればよいですか？

質問2：

また、scssのmixinsなどのreact機能を使用して、変数として動的にcolorを渡すボタンスタイルを生成できますか。

質問3：

Jsでcssを使用してインラインスタイルまたはクラス名を使用する必要がありますか？

ボタンなどの汎用コンポーネントの場合、ボタンが定義されているすべての場所で再利用できるグローバルクラスを使用するか、ローカルのインラインスタイルを使用してすべての場所でインラインスタイルを作成する必要がありますか？

javascriptcssreactjssass
32
WitVault

JSのCSS（擬似クラスとMQサポート付き）

ReactでCSSを記述するためのライブラリがたくさんあります 疑似クラスをサポートしていますが、すべてではないにしても、JSでCSSをインライン化または記述する必要があります強くお勧めします

CSSモジュール（通常どおりCSSを記述しますが、より良い方法で）

CSSモジュール もあります。すでに使用している場合は Webpackは簡単にセットアップできます 、import/requireオブジェクトとしてのCSSは、次のようにコンポーネントを使用します。

import styles from './Button.css'

const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
    <button
        onClick   = {onClick}
        className = {styles.primary}
        {...rest}
    >
        {children}
    </button>
);

コンポーネントの分離

また、<Button />にクラスを渡して、コンポーネント自体の内部の条件を処理するべきではないことも付け加えます。たとえば、classnames libを使用すると、次のようなことができます。

import classnames from 'classnames'

const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
    <button
        onClick   = {onClick}
        {/* 
          depends on the type prop, you will get the relevent button 
          so no need for consumers to care about the internals of the component
        */}
        className = {classnames('.btn', { [`btn-${type}`]: true })}
        {...rest}
    >
        {children}
    </button>
);

CSSモジュールとclassnames libを組み合わせて、いくつかの強力な組み合わせを作成することもできます。

17
ahmedelgabri

個人的には、グローバルCSSと Webpackに接続 を使用します。あなたのReactをずっときれいに保ち、もちろん、よりモジュール化され、簡単に編集できます。

私の知る限り、SCSS機能はReactとインラインで使用できません。

Reactでインラインスタイルを設定する必要がある場合は、このようにします。

var buttonStyle = {
    backgroundColor: "#229ac8",
    backgroundImage: "linear-gradient(to bottom, #23a1d1, #1f90bb)",
    backgroundRepeat: "repeat-x",
    borderColor: "#1f90bb #1f90bb #145e7a",
    color: "#ffffff",
    textShadow: "0 -1px 0 rgba(0, 0, 0, 0.25)"
}

<button style={buttonStyle}>Button</button>
11
David Meents

hover:フックの使用：

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

より複雑なシナリオでも同じ手法を使用できます。

2
Jaroslav

質問1：

ボタンの完全なスタイルをインラインスタイルとして設定するにはどうすればよいですか？

公式の docs から：

Reactでは、インラインスタイルは文字列として指定されていません。代わりに、キーがスタイル名のcamelCasedバージョンであり、値がスタイルの値（通常は文字列）であるオブジェクトで指定されます

次のCSSを考える

.btn-primary {
    background-color: #229ac8;
    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
    background-repeat: repeat-x;
    border-color: #1f90bb #1f90bb #145e7a;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

それのインラインスタイルの表現は

const MyButton = () =>
(
    <button
        className = { {
            backgroundColor: '#229ac8',
            backgroundImage: 'linear-gradient(to bottom, #23a1d1, #1f90bb)',
            backgroundRepeat: 'repeat-x',
            borderColor: '#1f90bb #1f90bb #145e7a',
            color: '#ffffff',
            textShadow: '0 -1px 0 rgba(0, 0, 0, 0.25)'
        } }
    </button>
);

質問2

また、mixinなどのscss機能を使用して、色を変数として動的に渡すボタンスタイルを生成できますか？

Reactのインラインスタイルは、CSSの抽象化にすぎません。他に素晴らしい機能はありません。ただし、インラインスタイルは単なるオブジェクトであるため、scssミックスインをシミュレートできる方法で動的に生成できます。もちろん、変数を使用することもできます。

このようなscss mixin

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

のようなもので達成することができます

const borderRadius = ($radius) => {
    return {
        WebkitBorderRadius: $radius;
        MozBorderRadius: $radius;
        MsBorderRadius: $radius;
        borderRadius: $radius;
    }
}

const MyComponent = () => {
    var inlineStyle = Object.assign({}, borderRadius(10), {
        backgroundColor: 'white'
    })

    return (
        <div style={ inlineStyle }>
            Hello, world!
        </div>
    )
}

質問3

Jsでcssを使用してインラインスタイルまたはクラス名を使用する必要がありますか？

これから決定的な答えを得ることができません。ただし、ジェネリックにはclassNameを使用し、詳細にはインラインスタイルを使用することをお勧めします。ニーズに合わせてコードを管理する方法はあなた次第です。

1
manyrdz

ボタンのインラインスタイルでjavascriptオブジェクトを設定して、色を動的に変更できます。例えば：

const normalButtonStyle = {
  background:'gray',
  color:'black',
  borderColor:'white'
}
const buttonCompleteStyle = {
  background:'red',
  color:'white',
  borderColor:'black'
} // this can be included in from another file as a style object as well

const MyButton = ({children, status, onClick, classNames, ...rest }) =>
(
  <button
    onClick   = {onClick}
    className = {`${classNames}`}
    {...rest}
    style={status === 'complete' ? buttonCompleteStyle : normalButtonStyle}
  >
    {children}
  </button>
);

テストされていませんが、そのようなものです。 Material UI の仕組みをご覧ください。

1
Mike S.