question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use materialize css classes in React4s components

See original GitHub issue

Issue Description

Hello @Ahnfelt,

We are using React4s way of applying css to components. Css support react4s provides is excellent.

We have a use case where we want to use css classes provided by materialize css .

For now one workaround we found is, We want to have TopBarCss (react4s CssClass) and read-text(materialize css class)

 E.div(
        TopBarCss,
        A.className("red-text", TopBarCss.name),
        E.span(
          BrandTitleCss,
          Text("My title")
        )
      )

What is standard way to do this?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

4reactions
Ahnfeltcommented, Aug 13, 2018

Fixed in v0.9.15

0reactions
Ahnfeltcommented, Aug 14, 2018

Unfortunately not; the CSS composition feature relies on having access to the styles of the composed CssClasses at generation time (eg. during offline rendering).

tir. 14. aug. 2018 kl. 07.38 skrev Poorva Gokhale <notifications@github.com

:

Hello @Ahnfelt https://github.com/Ahnfelt , thank you for external css class support 👍

I have one question regarding composing css classes. Like in React4s, I can compose css classes ResultTitleAreaCss and OperationTitleCss e.g.-

object ResultTitleAreaCss extends CssClass( OperationTitleCss, S.position.fixed(), S.left(“52%”), S.top.px(55) )

Now I am wondering if I want to compose third party css class say red-text, is there any way to do this. Or I am not sure is this requirement even feasible using css?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Ahnfelt/react4s/issues/15#issuecomment-412760104, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEyiMQbriLZJ6eFdBGFFUg4vUjD2eqAks5uQmJDgaJpZM4V58VK .

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use materialize-css with React? - Stack Overflow
Step 3) import materialise.js in whichever component its needed ... Here you can use Materialize CSS classes just like your HTML site using...
Read more >
How to Use Materialize CSS Modal in React
Materialize is a CSS framework that is based on Google's Material Design. ... React is a javascript library that is declarative and component-based....
Read more >
How to use Materialize css in your React JS project - 2020
UpdatedYou can also use react-hooks-functional compoents (useEffect) instead of componentDidMount now.In this tutorial, you are going to ...
Read more >
React App with Materialize CSS Part 2 - From NPM - YouTube
How to use materialize - css with React , part 2 using Materialize CSS via ... use of the CSS and initializing the...
Read more >
React App with Materialize CSS Part 1 - From CDN - YouTube
How to use materialize - css with React , part 1 using Materialize CSS via ... use of the CSS and initializing the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found