Пятиминутные продвинутые практические советы для Styled-компонентов

внешний интерфейс JavaScript React.js CSS

ерунда написана впереди

Еще в 2013 году React родился из воздуха. Но в то время мы думали, о черт, мы наконец-то разделили HTML/CSS/JS, почему появился JSX и нам нужно связать HTML и JS вместе? React создал HTML на JS. В React мы знаем, что все является компонентом. Итак, поскольку HTML можно написать на js, почему бы нам вместе не написать CSS? Разве это не настоящий компонент?

Styled-components созданы для React, решения следующего поколения для CSS в JS. В прошлом, если мы хотели достичь масштаба CSS, нам нужно было настраивать различные конфигурации в webpack или использовать решения js. А со styled-components вам просто необходимоimport styled from 'styled-components';Вот и все.

Даже идеальное сочетание React не только с TagName, но и с Props. Сделайте наш код лучше семантически, удобнее в сопровождении и эффективнее. Конечно, нам не нужно учитывать стоимость его обучения, если вы использовали CSS или SASS, вы можете сразу приступить к работе, потому что он сам по себе является надмножеством.

Далее я постепенно буду вводить некоторые уникальные функции, которые мне очень понравились за это время.

закуска

const Button = styled.button`
  background: #abcdef;
  border-radius: 3px;
  border: none;
  color: white;
`;
console.log(Button); //styled component
console.log(new Button()); // react component 

export default CustomButton extends React.component {
    render() {
        return <Button {...props} />
    }
}

используемые стилизованные компонентыtagged templateсинтаксис, создавая компоненты непосредственно для нас, чтобы писать стили.

наследовать

Существует два способа написания стилей наследования стилизованных компонентов:

const Button = styled.button`
  background: #abcdef;
  border-radius: 3px;
  border: none;
  color: white;
`;

const OtherButton1 = styled(button)``;
const OtherButton2 = button.extend``; // 老的写法，不推荐，未来会被废弃

Наследование метода записи 1 будет создавать только разные правила css, в то время как второй метод записи будет копировать правило css базового компонента, а затем добавлять различные веса css для переопределения. Не рекомендуется

Есть конечно и интересное "наследство"withComponent, мы можем использовать withComponent для изменения отображаемой метки

const Li = styled.li`
    color:#abcdef;
`;
const A = Li.withComponent('a'); // 将会渲染a标签

После компиляции они будут использовать разные имена классов, что очень полезно, если мы хотим использовать один и тот же стиль, но разные теги.

переопределение стиля

Упомянутое здесь покрытие стилей в основном относится к некоторому интерактивному поведению (наведение курсора, активное действие). По сути, наследование компонентов — это тоже своего рода покрытие.

В прошлом наши переопределения были написаны следующим образом:

const ListItem = styled.li`
  padding: 0;
  height: 48px;
  
  &.left-item-focus {
    .left-link {
       background: ${props => props.color};
    }
  }
  &:hover {
     .left-icon {
        color: #9e9e9e; // 500
     }
  }
`;

В styled мы можем использовать компонент styled-components для ссылки на нашу DOM, чтобы переопределить стиль, как показано ниже.

const Icon = styled.span`
    color: red;
`;

const ListItem = styled.li`

    &:hover ${Icon} {
        color: green;
    }
`;

Это по-прежнему способ покрытия стилей, но мы используем селектор напрямую.styledЭто просто ссылка на компонент. С таким интерфейсом нам не нужно думать о том, какое className или id нам нужно дать компоненту, чтобы достичь практики переопределения стиля. Однако есть еще один способ письма, который мне нравится больше всего.

СОВЕТЫ: ​​Ссылка на компонент должна быть компонентом, упакованным styled-components, и он сообщит об ошибке, если он напрямую отреагирует.

const ListItem = styled.li``;

const Icon = styled.span`
    color: red;
    
    ${ListItem}:hover & { // & 代表icon组件
        color: green;
    }
`;

Этот код реализует ту же функцию, но наше мышление изменилось. Такой код может оказаться менее навязчивым. Это больше соответствует принципу открытости и закрытости. Когда нам не нужен компонент Icon, мы можем просто удалить Icon напрямую. Нам не нужно переходить к родительскому компоненту, чтобы найти стили, связанные с компонентом, что не легко вызвать загрязнение стиля. Вдруг я чувствую, что мои глаза светятся, есть дерево!

Конечно, эта функция «родительская ссылка на подкомпонент», есть более обширные ссылки. Вы можете выбрать любого родителя DOM, а затем самостоятельно переопределить стиль. следующим образом:

const Icon = styled.span`
    color: red;
    
    html.ie-8 & {
        // fuck ie8
        color: blue;
    }
    body.xxx & {
        color: green;
    }
`;

Когда у любого родителя есть класс, он переопределяет стиль значка. Эта функция «дочерний компонент ссылается на родительский» — одна из моих любимых.

Выше вы можете видеть, что мы используем много&как селектор, в то время как&Есть и другие хитрости.

const Example = styled.li`
    color: red; 
    & {
        color:blue;
    }
    
    && {
        color: green;
    }
`;

Можете ли вы догадаться, как это в конечном итоге будет отображаться?

<li class='sc-gzVnrw fmpfVE'></li>

В конечном итоге он будет скомпилирован в следующий класс, но один из наших&представляетclassВес означает, что в конце мы будем отображать цвет прощения, потому что li применяется к.fmpfVE.fmpfVEтаблица стилей. Эта функция очень полезна.Например, когда вы используете сторонний компонент и хотите переопределить его стиль, мы можем добавить несколько&увеличить вес стиля, тем самым переопределив стили сторонних компонентов

Theme

Я просто хочу сказать одну вещь о Theme, то есть как мне пройти в Theme в сочетании со сторонними компонентами? У нас есть простой трюк. Например, используя Material-UI, если нам нужно расширять собственные компоненты на его основе, и нужны стили.

const ThemeProvider: React.SFC<ThemeProviderProps> = ({ themeName, children }) => {
  const theme = themes[themeName];
  return (
    <StyledThemeProvider theme={theme}>
      <MuiThemeProvider theme={theme}>
        {React.Children.only(children)}
      </MuiThemeProvider>
    </StyledThemeProvider>
  );
};

После этого нам нужно использовать только компоненты, предоставленные styled-components, для компонентов, которые нам нужно вызывать.withThemeОберните наш компонент, чтобы получить нашу тему.

Таким образом, мы можем получить тему и материал в наших стилизованных компонентах.

Вышеперечисленное - это все наши навыки.Посмотрев столько интересных черных технологий, вы не влюбились в styled-компоненты?

персональный сайтwww.meckodo

Github: github.com/MeCKodo

Категории