ReactJS: строка Flex-направления и justify-content: flex-start не работает

Question

Я видел несколько сообщений для ReactJS-native. Я считаю, что у меня все иначе, потому что я работаю с ReactJS и, следовательно, не с Views.

Я хочу отобразить формулу, которая при наведении курсора на определенный текст отображает сообщение div /. Я хочу, чтобы мои элементы div отображались в виде строки, поэтому содержимое выглядит так:

P(1 + R/N)nt

Прямо сейчас они отображаются в виде столбца.

P
(1 +
R/
N)
n
t

Это мой код:

<div key="4">
                <b>How did we get these numbers?</b>
                <div className="equation">
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            P
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            (1 +
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            R/
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            N)
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                          <sup>n</sup>
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                          <sup>t</sup>
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                </div>
            </div>

Мой emotion css Стиль:

const equation = css`
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
`;

Это песочница: https://codesandbox.io/s/emotion-pl9m3

Answer 1

Ваш стилизованный синтаксис компонента для класса css 'уравнение' неверен. Если вы осмотрите свою страницу, вы заметите, что css для уравнения классов не применяется к вашему родительскому div. Правильный синтаксис выглядит примерно так:

<Equation>
  <div></div>
  <div></div>
  ...
</Equation>

const Equation = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
`;

Рабочая песочница: https://codesandbox.io/embed/emotion-xupvk