It appears to me that there is room for improvement when it comes to checking for props in Styled Components.
Consider the following code:
${props => props.white && `color: ${colors.white}`}
${props => props.light && `color: ${colors.light}`}
${props => props.grey && `color: ${colors.grey.base}`}
${props => props.dark && `color: ${colors.dark}`}
${props => props.black && `color: ${colors.black}`}
${props => props.info && `color: ${colors.info}`}
${props => props.success && `color: ${colors.success}`}
${props => props.warning && `color: ${colors.warning}`}
${props => props.error && `color: ${colors.error}`}
${props => props.link && `color: ${colors.link.base}`}
This code represents a component called <Text> which alters the text color based on the prop used. For example, using <Text light> will apply the color defined as "light" in the variables file's colors object.
The code above appears repetitive as only the color name changes on each line whereas the structure remains identical.
Do you have any suggestions for making this code more concise and DRY?