Utilize React Styled Components to seamlessly unify the styles of two different components

Question

Utilize React Styled Components to seamlessly unify the styles of two different components

I want to have consistent styles for both a styled input element and a styled select element.

Currently, I accomplish this using string interpolation:

const styles = `
    background-color: white;
    width: 100%;
    border: 0 solid transparent;
    border-radius: 10px;
    margin-bottom: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 1.2rem;
`

const Select = styled.select`${styles}`
const Input = styled.input`${styles}`

Is there a more efficient way to achieve this without relying on a 'raw' string? One drawback of using the raw styles string is that Visual Studio Code doesn't provide syntax highlighting for it:

https://i.sstatic.net/4cNJl.png

css reactjs typescript visual-studio-code styled-components

Answer 1

Answer №1

If you're looking for solutions, you have a few different options to consider:

Utilize the css helper function:

const styles = css`
  background-color: white;
  // ...
`;

const Select = styled.select`${styles}`;
const Input = styled.input`${styles}`;

Use the "as" polymorphic prop (introduced in version 4):

<Select as="input">
  ...
</Select>

Try the withComponent method (although it may be deprecated):

const Select = styled.select`
  background-color: white;
  // ...
`;
const Input = Select.withComponent('input');

Answer 2

If you're looking for solutions, you have a few different options to consider:

Utilize the css helper function:

const styles = css`
  background-color: white;
  // ...
`;

const Select = styled.select`${styles}`;
const Input = styled.input`${styles}`;

Use the "as" polymorphic prop (introduced in version 4):

<Select as="input">
  ...
</Select>

Try the withComponent method (although it may be deprecated):

const Select = styled.select`
  background-color: white;
  // ...
`;
const Input = Select.withComponent('input');

Answer 3

Answer №2

If you want to include CSS using the css tagged template literal, you can follow this example:

import styled, { css } from "styled-components";

const styles = css`
  background-color: white;
  width: 100%;
`;

const Button = styled.button`${styles}`;
const Link = styled.a`${styles}`;

It should display properly with syntax highlighting (but I haven't tested it myself).

Answer 4

If you want to include CSS using the css tagged template literal, you can follow this example:

import styled, { css } from "styled-components";

const styles = css`
  background-color: white;
  width: 100%;
`;

const Button = styled.button`${styles}`;
const Link = styled.a`${styles}`;

It should display properly with syntax highlighting (but I haven't tested it myself).

Utilize React Styled Components to seamlessly unify the styles of two different components

Answer №1

Answer №2

Similar questions

Modifying webpage design using JavaScript for styling

Ways to expand HTML input fields to fill the whole table cell

When hovering over a div, reveal another div on top of a third div

Display an error message in the input type file Form Control if the file format is not .doc or .docx

What is the best way to place a vertical line above the text when it is in use?

Is it possible for me to create a Pomodoro clock similar to this one?

The implementation of TypeScript 3.5 resulted in a malfunction where the imported namespace was unable to locate the Enum during runtime

Implement a new functionality to a publicly accessible type without violating the pre-established agreement

Why do callbacks in Typescript fail to compile when their arguments don't match?

What is the best way to access data from a local JSON file in Gatsby when using TypeScript and GraphQL?

The browser does not automatically set the Cookie

Customize the background image in your Windows 8 app developed with HTML

What is the best way to dynamically include various properties in an object type depending on a generic union?

Use an observable stream instead of nesting promise.all to aggregate data from an array

Responsive Line Breaks in Bootstrap 4

Combining two strings within a JSX element in React-Native

"activeStyle" attribute consistently being implemented on links within pagesindex.js

Disappearance of logo div causes video to vanish

Position a modal in the vertical center with scroll functionality for handling extensive content

Issue with applying value changes in Timeout on Angular Material components