Что сейчас используется для стилей в реакте?

Question

[webe]

Хотелось бы найти какой-нибудь инструмент, где мне не нужно думать о конфликтах стилей между компонентами.
Но одновременно с этим, что бы не заморачиваться с описью классов.
Что не зашкварно исопльзовать в 2018 году? (чаще всего требуют в вакансиях)

Answer 1

[Антон Спирин]

Styled Components. В исходном коде вообще нет селекторов, а JSX получается лаконичный и легко читаемый.

Comments

[webe]

Антон Спирин а можете подсказать такой момент.
У меня есть некий css class:

.wrapper {
max-width:1200px;
}

я его преобразовал в SC
const Wrapper = styled.div`
max-width:1200px;
`;

А как его теперь исопльзовать глобально?
Нужно создавать файл src/components/Wrapper/style.js и этот файл импортирвоать во все компоненты?
Почитал, холли варов много, кто-то говорит InjectGlobal лучше не использовать, кто-то через className, кто-то пишет про наследование.

Читал статьи не свежие, можнт же с тех пор что-то допилили , не подскажете как вы делаете?

[Антон Спирин]

webe, injectGlobal можно использовать для ресета, ну и каких-нибудь глобальных вещей:

import { injectGlobal } from 'styled-components';
import { normalize } from 'polished';

const applyGlobalStyles = () => injectGlobal`
  ${normalize()}
`;

export default applyGlobalStyles;

Я почти каждый компонент начинаю описывать с обертки Wrapper и отдельных Wrapper-ов у меня нигде нет.
Базовые компоненты которые будете переиспользовать(Button, TextArea, PageWrapper, Grid) кладите в папку, например /components/Core
Сами StyledComponents храните в том же файле где и компонент это очень удобно, нет никакого смысла разделять, если это не самостоятельный элемент.
Пример компонента:

import * as React from 'react';
import styled from 'styled-components';
import { Map } from "immutable";
import { withRaven } from 'app-lib/index';

const Wrapper: any = styled.div`
  display: flex;
  align-items: center;
  width:100%;
  font-family: ${props => props.theme.serifFamily};
`;

const PreviewWrapper: any = styled.a`
  display: inline-block;
  margin-left: 24px;
`;

const Preview = styled.div`
  width: 160px;
  height: 100px;
  background-image: url(${(props: { src: string }) => props.src});
  background-position: center center;
  background-size: cover;
`;

const A: any = styled.a`
  color: ${props => props.theme.linkColor};
  font-size: 32px;
  font-style: italic;
  line-height: 36px;
`;

interface Props {
  data: Map<any, any>
}

interface State {}


class Link extends React.Component<Props, State> {

  static displayName = 'Link';

  shouldComponentUpdate(nextProps: Props, nextState: State) {
    return nextProps.data !== this.props.data;
  }

  @withRaven
  render() {
    const { data } = this.props;

    const link = data.get('url');
    const url = link.get('url');
    const title = link.get('title');
    const image = link.get('image');

    return (
      <Wrapper>
        <A href={url}>{title}</A>
        {image && (
          <PreviewWrapper href={url}>
            <Preview src={image} />
          </PreviewWrapper>
        )}
      </Wrapper>
    );
  }
}

export default Link;

[webe]

Антон Спирин, а не подскажете как ставить комментарии в стилях?
// - вызывает ошибку
а */ */ игнорируется
Может там нужно какую-то доп библиотеку ставить?

вот так делаю, но код все равно отрабатывает, ввыводится результат в консоль и устанавливается background:

*/${p => console.log('p!@#$%$^', p) && 'color:red;'}; */
  */background: ${props => (props.bg ? 'palevioletred' : 'white')}; */
  font-size: 20px;

[planc]

webe,

/**/

если внутри jsx, то обернуть в {} еще надо

[Антон Спирин]

webe, у меня отлично работают:

Вы ставили babel-plugin-styled-components или https://github.com/Microsoft/typescript-styled-plugin ?

Так же поставьте плагин для IDE

[Максим]

Антон Спирин, класс!

Answer 2

[string15]

styled-components
css-modules