I have created an app using [flow bite react components] (https://flowbite-react.com/).
This is my app: https://stackblitz.com/edit/react-wtyfu9
I don't understand how to add custom tailwind className and useState, I have read the official documentation.
I know this topic is simple. But I'm not a front-end developer.
Can anyone help me and have an understanding of how it works?
Related
I recently started to work with React and I want to use an admin template. I am looking for a way to import the styles from theme to React components. I am using Keen Admin Theme
Theme includes all necessary html, js and sass files. Various tutorials suggest copying and pasting the html code inside the component but I am looking for a more practical way rather than copying and pasting because JSX requires additional changes on html, furthermore I think it is not a good practice.
So what I am looking for is similar to Angular's approach, so I can pass the html file directly to the component.
Angular's approach:
#Component({
selector: 'app-component-overview',
templateUrl: './component-overview.component.html',
styleUrls: ['./component-overview.component.css']
})
If there is no such option what is the recommended way of using out-of-box themes in React?
The best way is to write it yourself to avoid copying pasting. Or find the components that are of React or Angular (as per your requirements)
Is there a way in Next.js to separate critical CSS and non critical for each page and load non-critical asynchronously ?
I am using styled-components in my pages and components + couple of external css libraries.
Thanks!
You can use module css, but not global. Global styles can only be used in _app.js, but you can import "module" css which is a built in feature. Is this what you mean?
// Foo.js component needing third party
import '#thirdparty/dist/styles.css'
// Foo.js component with module css from you
import styles from "./Foo.module.css";
I apologize if this is not what ur looking for. I'm not entirely sure what you are in need of.
I have two theme files: light.css and dark.css. I want to switch between the two themes with the useState React Hook (or another method in a react functional components).
For example, I have this in my Navbar functional component:
import "./light.css"
So I want a mechanism to import (or rather switch) the two files using the hooks based on a user action by pressing a toggle or a button on the Navbar which would call a 'setTheme' and have that in a useEffect block.
Does that make sense? If yes, how do I do that? All the tutorials I can find are based on hardcoded css while in my situation I must use the two files mentioned above. thanks
Solved it!
I basically used what I was suggesting in my question but with an extra twist:
I used those hooks: useState, useEffect and useContext
the useState: to switch the values between dark and light.
the useContext: to write in the localstorage the theme: item (for persistence)
the useEffect: to check the value from the local storage each time the theme value is changed + refresh the browser.
Not sure if it is the neatest solution, but it works and saves the user preference which is a plus for me.
I know this is a very bad approach when we try to add two different css frameworks in a single project. But for now, due to a project requirement, I need to add bootstrap and materialize css in a project. In root component bootstrap is used, and in child component I will use materialize.
In child component I have included materialize in the following way
import React, {Component} from 'react';
import {findDOMNode} from 'react-dom';
import screenFull from 'screenfull';
import material from 'materialize-css/dist/css/materialize.css';
import './Control.css';
but adding this way overlaps bootstrap classes which is obviously not the required behaviour.
I want to limit scope of materialize.css inside the child component only. Can anyone give me a suggestion on this?
Note: Root component was developed before, and create-react-app is not used over there. webpack configuration file has been written manually.
Please use https://fezvrasta.github.io/bootstrap-material-design/ for your project as it's based on the bootstrap the UI will have look and feel like material and you haven't to change the existing code. I recommended to use only one UI framework for you project.
As I have seen that you are facing a problem where you need to include both the css framework, I better suggest you to use https://mdbootstrap.com/.
The second thing which I suggest you is to include in your application not for specific component. If you want to make some change for specific component look and feel create separate css/scss file and include it to you component.
I am using style-loader with css-loader in React application. Each time I change/update my code, wether it is JS or SCSS, my client.js and client.css are rebuilt.
Each time that happens, webpack config/plugins do a very cool feature. Any class that is not used in React is not added to final .css file. Awesome right!
But I need all the classes to be added in. Even the once that are not used.
I am migrating from React to Twig and I copy paste generated HTML from React application into Twig and modify React components to have all the static HTML in twig leaving only some small interactive bits in React.
FYI That was a business decision as ReactJS was server rendered for best SEO optimisation, but it does not make sense in our case.
If you know a better way to migrate ReactJS application into Twig please let me know! I think biggest challenge will be optimising classes name conventions from React into Twig. At the moment I am coping the fully generated name like <div class="src-components-common-Page-___Page__page">.