Override inline style via props in React

Question

I want to know how React inline styling works.

Can I override the inline styles from its parent via props?

// child.js
const Para = ({ styles }) => {
return (
  <p style={{ color: 'black', ...styles }}> // Is this best practice?
    This is paragraph
  </p>
);

I've passed the overriding styles from parent via props.

<Para styles={{ color: 'green' }} />

Answer 1

Yes. What you have done is correct way to do overrides.

Whether you should do this or not, depends on your application needs.

• It is good to provide flexibility to the consumers so that they can customize the look and feel of the component.
• If you want to strongly enforce a certain design system across your entire app, then maybe providing a way to override styles may not be the best thing to do. You can instead provide them with different variants of the component (primary, secondary, tertiary, etc) and they can pass the variant to your component to get different flavour.