Is there anyway to import more than one css?

[idangozlan]

Hi,

Sometimes, there is need to import two or more css files, and I will give an example: Says you have one <Feeds> component which contains many <FeedA /> and <FeedB />, and those feeds contains some title which you wanna style same in FeedA and FeedB, but they have also their unique css.

Thanks

[raveclassic]

Hi!

Firstly, are your FeedA and FeedB placed in the same context/directory as parent Feeds? If so then you just need to adjust their css.

Otherwise, if you inject into FeedA and FeedB their default styles (that unique css) and want to override that styles from different parent component context there are multiple ways to do that.

1. Add styles to context by passing additional css objects under specific keys of FeedA and FeedB as it's described here

2. Construct child theme object in parent component by manually setting specific css keys in that object and pass it to all children via props. Say your feed items have a title and content entries in there theme definition. In parent then you can build child theme with const itemTheme = {title: 'some_class', content: 'some_additional_class'}; and pass it to children <FeedA theme={itemTheme}/>. Note that you can reference child classes in parent's css-module! Also you can use themeable helper to merge themes.

3. The most convenient (IMO) way. You can place child styles to separate file in parent's directory with the same exactly css names as that child has. Then you just import that css-module and just pass it to child via props.

   //FeedA.css
   .title {
   color: red;
   }

   //FeedB.css
   .content {
   color: blue;
   }

   //Feed.jsx
   import feedATheme from './FeedA.css';
   import feedBTheme from './FeedB.css';
   export const Feed = props => (
   <div>
   <FeedA theme={feedATheme}/>
   <FeedB theme={feedBTheme}/>
   </div>
   );

[idangozlan]

I think you didn't get me, I don't want code duplications, and try to think that i have thousands of Feeds types, to define the same styles to each one of them / import it, will be not efficient at all.

If i get you wrong, please demonstrate your ways with code (inc. using this module), it will make it easier to understand :)

Thanks!

[raveclassic]

@idangozlan Perhaphs I don't get what you are trying to achieve.. =( Could you please provide an example? If you don't to want to duplicate styles then you should wrap them in a base component and reuse that component in other specific components.

[idangozlan]

Finally I created component for those titles, it's really simple component but I think it's the best solution.

Thanks :)