how do you share styles in react?

Question

I have a component in which I got:

const Title = styled(Typography)({
  fontFamily: 'Manrope',
  fontStyle: 'normal',
  fontWeight: 600,
  fontSize: 28,
  lineHeight: '38px',
  color: '#20232C',
  marginTop: 17,
  height: 50,
  display: 'block',
});

and in this component i use it like this..

<Title>Title here</Title>

As you can imagine, Title is something that could be used in many places in the app. So I took the above Title and put it in components/Titles/styles.tsx . and then export it from there.

Now, wherever I need this, I import Title and just use it.

The problem : In some other places, this Title needs to have different fontWeight and marginTop , and so on. Who knows, in the future, maybe in one place, it could need 4-5 fields different then in the current Title styles.

How can we workaround this?

Way 1:

export const Title = styled(Typography)(
  ({ fontWeight }: { fontWeight?: number }) => ({
    width: 'fit-content',
    fontFamily: 'Manrope',
    fontStyle: 'normal',
    fontWeight: fontWeight || 'normal',
    fontSize: 28,
    lineHeight: '25px',
    color: '#20232C',
    marginTop: '17px',
  }),
);

As I made fontWeight optional, We could do this for all fields.

What do you think of this way and how do you handle situations like this? it's really almost the first time I am dealing with styles in js. I come from a vue.js world.

Answer 1

Making the fontWeight as an attribute is of course fine, but might come too complex when extending it further.

The other option would be inherit the Title into another styled component (always best when you find meaningful use-cases for naming), eg:

export const Subtitle = styled(Title)`
  font-size: 24px;
  font-weight: bold;
`

Answer 2

This is specific to styled-components.

There are two common ways, both covered in the documentation .

Props

const Button = styled.button` /* Adapt the colors based on primary prop */ background: ${props => props.primary? "palevioletred": "white"}; color: ${props => props.primary? "white": "palevioletred"}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; render( <div> <Button>Normal</Button> <Button primary>Primary</Button> </div> );

Extending

// The Button from the last section without the interpolations const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; // A new component based on Button, but with some override styles const TomatoButton = styled(Button)` color: tomato; border-color: tomato; `; render( <div> <Button>Normal Button</Button> <TomatoButton>Tomato Button</TomatoButton> </div> );

Answer 3

You should be able to use props in the Title tag and pass them to the individual component like this:

<Title thisTitlesHight="80px" thisTitlesWidth="50px">Title Here<Title>

Then using these props inside your child component:

export const Title = styled(Typography)(
  ({ fontWeight }: { fontWeight?: number }) => ({
    height: this.props.thisTitlesHeight,
    width: this.props.thistitlesWidth
  }),
);

you also have to define props in the function.

I created a codeSandbox so you can see the code for it: https://codesandbox.io/s/stupefied-wildflower-wmw26?file=/src/App.js