import React from'react'
import styles from'./styles.pcss'
const Spinner = () => (
{/*elements here*/}
)
export default SpinnerI want to change the position of the spinner component, So this must be done by the spinner’s parent. I see 3 solutions:
>Use the CSS rule tag for positioning
(the spinner’s root element). I don’t like this because The parent component is making assumptions about the internal structure of the spinner. If this tag changes, all styles for it will be broken. I must be able to change the internal structure of my component without worrying about many aspects of my application .
> Pass the className down to the spinner component. It is better because there is no assumption about the inside of the spinner. But because maybe every component can be positioned by their parent (a very common CSS task), So I will implement the passed className (including prop type verification, etc.) for each component that needs a custom style. There must be a better solution.import React, {PropTypes} from'react'
import classNames from'classnames'
import styles from'./styles.pcss'
const Spinner = ({ className }) => (
{/*elements here*/}
)
Spinner.propTypes = {
className: PropTypes.string
}
export default Spinner>Use include
around the component I want to style:
However, in the case where many elements must be set (such as setting their position), this can lead to Unnecessary
s bloat tag.Do you have any suggestions?
Thank you
I prefer solution 3. In this way, style the component (Spinner) Keep it clean, you don’t have to implement extra logic to get the className, verify it and merge it with your own class.I want to see how a third-party library implements this situation , They are also in favor of solution 3. This is a related discussion about style
react-intl In addition, the package
is only used when setting the style for the container itself (usually the position), and Not used in the content of the component. If many components must be located, they are likely to be child components, for example:In this case, the parent component of will pass the className to them because they will not exist Outside of this specific context. A small example can illustrate this challenge well:
< pre>import React from’react’
import styles from’./styles.pcss’const Spinner = () => (
{/* elements here*/}
)
export default Spinner < p>I want to change the position of the spinner component, so this must be done by the spinner’s parent. I see 3 solutions:
>Use the CSS rule tag (spinner) for positioning
I don’t like this because the parent component is making assumptions about the internal structure of the spinner. If this tag changes, all styles for it will be broken. I must be able to change the internal structure of my component Without worrying about many aspects of my application.
>Pass the className down to the spinner component. It’s better because there is no assumption about the inside of the spinner. But because maybe every component can pass through their parent (A very common CSS task) to locate, so I will implement the passed className (including prop type verification, etc.) for each component that needs a custom style. There must be a A better solution.import React, {PropTypes} from'react'
import classNames from'classnames'
import styles from'. /styles.pcss'
const Spinner = ({ className }) => (
{/*elements here*/}
)
Spinner.propTypes = {
className: PropTypes.string
}
export default Spinner>Use include< div> around the component I want to style:
However, in the case where many elements must be set (such as setting their position), this will result in swelling tags with unnecessary
s .Do you have any suggestions?
Thank you
I prefer solution 3. In this way, the styled component (spinner) is kept clean, and there is no need to obtain the className, Verify it and merge it with your own class to implement additional logic.
I want to see how third-party libraries implement this situation, and they also favor solution 3. This is about styles The related discussion of
react-intl In addition, the package
is only used when styling the container itself (usually the position), not in the content of the component. If you have to position many Component, they are likely to be child components, for example:In this case, the parent component of will pass the className to them, because they will not exist outside this specific context. < /p>
React and CSS modules: How to set component style without assume that their content
A small example can illustrate this challenge well: