web-dev-qa-db-ja.com

反応トーストトーストの背景色を調整する最も簡単な方法

私はこのように試しましたが、何もしません：

const myToast = () => (
  <div style={{backgroundColor: myColors.green}}>
    ...some text content...
  </div>
)

次にApp.jsで

class App extends Component {
  showMyToast = () => {
          toast(<MyToast />, {
            closeOnClick: false,
            toastId: 'my_toast',
            autoClose: true,
            closeButton: false,
            position: toast.POSITION.BOTTOM_CENTER,
            className: 'toast'
          })          
  }
}

テキストが書かれた白いトーストが見えます。

cssreactjstoast
4
Steve Waters

@Laurensの回答に基づいて、コードサンドボックスのパターンが非常に役立つことがわかりました。以下に示す通知を受け取るために私がしたことは次のとおりです

enter image description here

まず、トーストコンテナをアプリのルートのAppコンポーネント内にマウントしました

import React from 'react';
import { Provider } from 'react-redux';
import { ToastContainer } from 'react-toastify';
import store from './redux/store';
import Routes from './Routes';

const App = () => {
  return (
    <Provider store={store}>
      <ToastContainer
        autoClose={2000}
        position="top-center"
        className="toast-container"
        toastClassName="dark-toast"
      />
      <Routes />
    </Provider>
  );
};

次に、通知スタイルごとに、一連のCSSスタイルを定義しました。コンポーネントはそのように見えました

// customToast.js
import { toast } from 'react-toastify';
import { css } from 'glamor';

const customToast = {
  success(msg, options = {}) {
    return toast.success(msg, {
      ...options,
      className: 'toast-success-container toast-success-container-after',
      progressClassName: css({
        background: '#34A853',
      }),
    });
  },
  error(msg, options = {}) {
    return toast.error(msg, {
      ...options,
      className: 'toast-error-container toast-error-container-after',
      progressClassName: css({
        background: '#EE0022',
      }),
    });
  },
  info(msg, options = {}) {
    return toast.error(msg, {
      ...options,
      className: 'toast-info-container toast-info-container-after',
      progressClassName: css({
        background: '#07F',
      }),
    });
  },
};


export default customToast;

これらを使用するには、import customToast from 'customToast.js'を実行します。これで、customToast.success、customToast.errorなどを使用できます

成功通知のスタイルを以下に示します

.toast-success-container {
  color: #000 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid #34A853 !important;
  box-shadow: 0px 1px 5px rgba(248, 175, 175, 0.1) !important;
}

.toast-success-container-after {
  overflow: hidden;
  position: relative;
}

.toast-success-container-after::after{
  top: 0;
  left: 0;
  content: '';
  width: 7px;
  height: 100%;
  position: absolute;
  display: inline-block;
  background-color: #34A853;
}

また、CSSに一連の!importantを貼り付けなければならなかったことにも気付くでしょう。

3
chidimo

Glamor を使用すると、トーストの背景色などの簡単なものを簡単に調整できます。
この例 グラマーを使用して、背景が緑色のシンプルなトーストを表示します。

toast("Hello!", {
    className: css({
        background: "#00FF00 !important"
    })
});

要件がより複雑な場合は、 この例 のように独自のスタイルをグローバルに実装できます。

4
Laurens Deprost

1.次のリンクを使用してglamorousをインストールします https://glamorous.rocks/basics/#installation

2.その後、このようにcssをjsファイルにインポートします。

import { css } from 'glamor';

3.その後、このようなトーストポップアップに独自のスタイルを与えます。

 toast.configure({
            autoClose:10000,
            draggable: true,
            hideProgressBar: true,
            position: toast.POSITION.TOP_CENTER,
              toastClassName: css({
                fontSize: '18px !important',
                backgroundColor: '#da1c36 !important',
                padding: '15px !important'
              }),
        });
0
Nava Ruban