Блог

Я создаю Next.js веб-сайт, и я сталкиваюсь с этой проблемой:

У меня есть 3 формы, которые работают практически одинаково, но все они выглядят по-разному. Я хотел бы создать фактическую форму только один раз, но иметь возможность каким-то образом стилизовать ее по-разному, не дублируя слишком много кода и делая все «правильно».

Решение, которое я придумал, состоит в том, чтобы просто присвоить форме класс и оформить его дочерние элементы с помощью классического CSS. Это работает, но кажется «неправильным», учитывая, что остальная часть проекта использует Styled-components . Я хотел бы найти решение, которое следует принципам SC вместо добавления глобальных стилей в приложение.

Вот как выглядит код в настоящее время:

 // form.js
export default Form = () => {
  /* ... hooks and stuff ... */  

  return (
    <form>
      /* ... */
    </form>
  )
}

// styled-form-1.js
import Form from './Form.js'

export default Form = () => {
  return (
    <Form className="styled-1" />
  )
}
 

 // globalStyles.css
.styled-1 form { /* ... */ }
.styled-1 input { /* ... */ }
.styled-1 button { /* ... */ }

.styled-2 form { /* ... */ }
.styled-2 input { /* ... */ }
.styled-2 button { /* ... */ }
 

Как я уже сказал… Это работает нормально, но я хочу сделать это способом styled-components. Я просто не могу найти это решение.

Вы можете передать функцию литералу шаблона styled-component, чтобы адаптировать его на основе реквизитов. Например:

 const Button = styled.button`
  background: ${props => props.primary ? "red" : "blue"};
  color: ${props => props.primary ? "blue" : "red"};

  font-size: 1em;
  padding: 1em;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);
 

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