React+Reduxでstyled-componentのCSSが正常に反映されない

Question

前提・実現したいこと

Reduxのmodeの状態によってstyled-componentsのcssを変えたい

発生している問題・エラーメッセージ

propsやlogger上のmodeの値がどう変化しても、cssはtrueの時の値が入っている

該当のソースコード

class App extends React.Component {
  
    render(){
      return (
        <div className='App'>
          <Header />
          <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/about' component={About} />
            <Route path='/skills' component={Skills} />
            <Route path='/products' component={Products} />
            <Route path='/contact' component={Contact} />
          </Switch>
          <button 
          type='button'
          onClick={() => this.props.changeDay()}
          >click me</button>
          <button 
          type='button'
          onClick={() => this.props.changeNight()}
          >click here</button>
          <Footer />
        </div>
        );
      }
    }



const mapStateToProps = state => {
  return {
    mode: state.mode.mode
  };
};

const mapDispatchToProps = dispatch => ({
    changeDay: () => { dispatch(changeDay()) },
    changeNight: () => { dispatch(changeNight()) },
});

export default 
connect(
  mapStateToProps,
  mapDispatchToProps
)
(App);

import { combineReducers } from 'redux';
import mode from './mode.reducer';

const rootReducer = combineReducers({mode});

export default rootReducer;

import { DAY, NIGHT } from './mode.actions';

const initialState = {
  mode: ''
}

const modeReducer = (state = initialState, action) => {
  switch (action.type) {
    case DAY:
      return { mode: DAY };
    case NIGHT:
      return { mode: NIGHT };
    default: 
      return state;
  }
};

export default modeReducer;

export const DAY = 'DAY';
export const NIGHT = 'NIGHT';

export const changeDay = () => {
  return {
    type: DAY,
    payload: { mode: DAY }
  };
};

export const changeNight = () => {
  return {
    type: NIGHT,
    payload: { mode: NIGHT }
  };
};

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './root-reducer';
import logger from 'redux-logger';

const middlewares = [logger];

export const store = createStore(rootReducer, applyMiddleware(...middlewares));

export default { store };

export const BgColor = css`
  background-color: ${props => props.mode = 'DAY' ? 'white' : 'black' };
`;

export const Color = css`
  color: ${props => props.mode = 'DAY' ? 'green' : 'yellow'};
`;

試したこと

componentDidUpdateを使用してレンダリングされてることは確認しました。
ボタンを押した際にpropsのmodeやloggerのstateで意図した値に変更されていることは確認しました。
initialStateの値を空にしていますが、初回レンダリング時にtrueのcssが反映されています。

補足情報（FW/ツールのバージョンなど）

React+Reduxで作成しています。
style.jsxで共通のcssを決めて各styled-componentに渡しています。
このような場で質問するのは初めてですが、足りない情報等あれば教えてください。
よろしくお願い致します。

Answer 1

ぱっと見でここが原因では？と思える箇所があります。styled component を作るところの三項演算子の条件の部分が

修正前：

props.mode = 'DAY'

となっていますが、上記は常にtruthyなので、三項演算子の結果も常に :の前の値が返されてしまって、意図したようにはならないです。ですので、

修正後：

props.mode == 'DAY'

または

修正後：

props.mode === 'DAY'

としてみるといかがでしょうか？
この修正だけで、全てが意図通りに動くかは分かりませんが、何らか問題解決に進展するのではと思います。

Comments

[ichi_13119]

ご回答ありがとうございます。
===に変更したところ、falseの値が反映されるようになりましたが、modeの値が'DAY'になってもtrueの値にはならない状態になっています。

[jun68ykt]

コメントありがとうございます。

> ===に変更したところ、falseの値が反映されるようになりました

とのことですので、とりあえず前に進んだ感じでしょうか？
現状について、

> modeの値が'DAY'になってもtrueの値にはならない状態になっています。

という次の問題については、コード全体を見ていないのではっきりしたことは言えませんが、おそらく、 BgColorおよびColorを使っている箇所に何か問題があるのでは？と推測しています。

[ichi_13119]

前に進んだか、と言われると少し怪しいです。
反映されてるのが、true時の値かfalse時の値かというだけで動きは変わっていないので。。。

使っている箇所の問題としてはpropsで渡している物が違う説が一番怪しそうかなと思っています