当className动态生成时，如何更改样式化组件主题？

Question

我尝试用TypeScript将样式化的组件应用于我的React代码。
现在我的render()方法使用循环生成多个元素，每个元素的className由另一个方法动态生成。

render() {
    try {
      const {steps} = this.props;
      return (
        <div className="step-bar">
          {steps.map((s, i) => (
            <div key={i} className={this.getClassName(i)}>
              {s}
            </div>
          ))}
        </div>
      );
    } catch(e) {
      utils.sendErrorObject(e);
      return null;
    }
  };

现在我想对这个代码应用样式化组件，并根据classname处理多个样式，但我不知道如何指定条件，因为classname在代码中是动态的。
有人知道好主意吗？

Answer 1

试试看：

import styled from 'styled-components';

const MyStyledComponent = styled.div`
   background-color: ${props => ~props.className.indexOf('current') ? 'red' : 'blue'}
`

...

render() {
   return <MyStyledComponent className={this.getClassName(i)}>Text</MyStyledComponent>
}