I sometimes see people using a component, that has a styled component attached to it. But in addition, they pass in inline styles for that component as well. (So they use both inline/styled component for the same component). Is there a reason for this?

CodePudding user response：

This makes sense when the styles defined in the Stylesheet are rather broad and can be used for multiple components. But if you then want to add some additional styles, you can't modify the style you applied since its used for multiple components and would change all the others too. On the other side, it wouldn't make sense to create a new style in the Stylesheet because the style you want to add is very specific but doesn't include to many attributes to make it worth defining an own style for it. As example, you have to views and both of them have content inside that should be centered on the x and y axis. For both views, this style would apply:

center: {
  justifyContent: 'center',
  alignItems: 'center,
}

So you would define this style in the Stylesheet. Now, you wan't to have different background colors for the views. To define new styles in the Stylesheet only for the backgroundColor attribute wouldn't be worth it so you just define it inline. In the end, you should now that having a lot of inline styles can drastically reduce performance, especially when the component is being rerendered many times (animations for example). So you should avoid defining a lot of stuff inline and only use it where its just not worth it to define a lot of new styles for a few individual attributes