Как наследовать стили в Styled Components?

Question

[webe]

Как наследовать стили в Styled Components?
Нужно взять мой react-компонент и подменить в нем некотрые стили.

import MyInput from '../components/Input';

Импортирую react компанент MyInput, внутри него я стилизовал все с помощью Styled Components.
Если рендерить, то все ок, но я хочу подменить в нем пару стилей,
как это сделать с помощью Styled COmponents подскажите плиз.

const EnchantedInput = styled.MyInput`
  border: 3px solid red;
`;

const EnchantedInput = MyInput.extend`
  border: 3px solid red;
`;

const EnchantedInput = styled(TextInput)`
  &&& {
    color: palevioletred;
    font-weight: bold;
    border: 10px solid red;
  }
`;

Эти варианты не работают :(

Либо я что-то не так делаю... может кто объяснить разницу между этими 3-мя примерами?
Возможно это не реально добится в styled Components и нужно использовать High Order Component ?
Еще вижу вариант навесить Style = {{}} ...

Answer 1

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

Если хотите изменить стили React.Component надо передавать методе render свойство className. Так же можно вынести все элементы компонента в статические поля, чтобы позже переопределять их стили.

const Wrapper = styled.div`
  // some styles
`;

const ChildElement = styled.div`
  // some styles
`;

class MyComponent extends React.Component {
  static ChildElement = ChildElement;
  
  render() {
    const { className } = this.props;

    return (
      <Wrapper className={className}>
        <ChildElement>Some text</ChildElement>
      </Wrapper>
    )
  }
}

export default MyComponent;

const SyledMyComponent = styled(MyComponent)`
  // some styles

  ${MyComponent.ChildElement} {
    // some styles for ChildElement
  }
`;

Метод extend работает только со StyledComponent:

const AbstractElement = styled.div`
  // some styles
`;

const ConcreteElement = AbstractElement.extend`
  // some styles
`;

Comments

[webe]

Антон Спирин а можете еще подсказать что означает

const A = styled.css`border:1px solid black`
const B = styled.div`${A}`

Какой в этом смысл эти мы можем сделать вот так:

const A = `border:1px solid black`
const B = styled.div`${A}`

Зачем нужно писать именно styled.css

Причина в том, что если мы будем писать просто в кавычках, то мы не можем использовать фичи SC?

И еще такой вопрос, что-то наследование все путает, вроде как создано для гибкости, но в проекте образуется паутина.
Можно ли создать 3 отдельных кнопки просто, если у меня в них разыне стили?
Или лучшей практики все же считается кастомизировать?

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

webe, разница в том, что метод styled.css возвращает массив шаблона с интерполяцией, а шаблонная строка сразу генерируется в строку.
Вот хороший пример:

const complexMixin = css`
  color: ${props => props.whiteColor ? 'white' : 'black'}
`;

const StyledComp = styled.div`
  ${props => props.complex ? complexMixin : 'color: blue;'}
`;

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

Ну и еще styled.css хорошо использовать, так как содержимое этой функции подсвечивает плагин для IDE и там работает автодополнение.

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

webe, по поводу кнопки если это совершенно разные кнопки то можно и разные. Если одинаковые с разными стилями, то проще использовать один компонент:

import * as React from 'react';
import { Link } from 'react-router-dom';
import styled, { css } from 'styled-components';

const baseStyles = css`
  display: inline-flex;
  align-items: center;
  font-family: ${props => props.theme.sanSerifFamily};
  font-size: 15px;
  cursor: pointer;
  outline: none;
  user-select: none;
  
  &:disabled {
    cursor: not-allowed;
    pointer-events: none;
  }
`;

const getButtonSizeStyles = ({ size }) => {
  switch(size) {
    case 'sm':
      return css``;
    case 'md':
      return css`
        height: 32px;
        line-height: 32px;
        padding: 0 16px;
        border-radius: 3px;
      `;
    case 'lg':
      return css`
        height: 40px;
        line-height: 40px;
        padding: 0 30px;
        font-weight: 500;
        border-radius: 5px;
      `;
  }
};

const getButtonStyles = ({ type }) => {
  switch (type) {
    case 'outline':
      return css`
        ${getButtonSizeStyles};
        color: #0082ea;
        background-color: #fff; 
        border: 1px solid currentColor;
        
        &:hover {
          color: #006CB5;
        }
      `;
    default:
      return css`
        ${getButtonSizeStyles};
        color: #fff;
        background-color: #0082ea;
        border: 1px solid #0082ea;
        
        &:hover {
          background-color: #006CB5;
        }
        
        &:disabled {
          background-color: #ccc;
          border-color: #ccc;
        }
      `;
  }
};

const getComponent = styledFunction => styledFunction`
  ${baseStyles}
  ${getButtonStyles}
`;

type ButtonSize = 'sm' | 'md' | 'lg';

type Props = {
  children: any
  type?: string
  onClick?: Function
  to?: string
  className?: string
  disabled?: boolean
  size?: ButtonSize
}

function Button({
  type,
  className,
  to,
  onClick,
  children,
  disabled,
  size = 'md',
  ...props
}: Props) {
  const styledFunction = to ? styled(Link) : styled.button;
  const Component = getComponent(styledFunction);

  return (
    <Component
      type={type}
      size={size}
      className={className}
      disabled={disabled}
      to={to}
      onClick={onClick}
      {...props}
    >
      {children}
    </Component>
  );
}

export default Button;

Это живой набросок из проекта, в котором еще не готов кит с кнопками и кнопки пока пишутся параллельно с дизайном. В итоге реализация будет переписана с сохранением интерфейса, ну а пока компонент хорошо расширяем.

baseStyles вынесены только из-за подсветки в IDE. Надеюсь скоро добавят к плагину конфиг для добавления своих функций для обработки плагином.

[Иван]

Антон Спирин, очень сложная штука :с

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

Иван, что именно показалось сложным?

[Иван]

Антон Спирин, тот кусок кода,который вы продемонстрировали сверху :) я только осваиваю sc

Answer 2

[daima]

Что-то я ничерта не понял. Нельзя ли написать попроще, применительно к хотелке автора?
вот он импортировал
import MyInput from '../components/Input';
Теперь надо подмешать стили