I want to build the simplest dark/light toggler button in react, there is. So far I have made a toggler component and gave it a state with
this.state = {style: './App.css'}
and 2 functions one is setting the this.state.style to ./darkmode.css the other one is back to ./App.css I binded them to 2 buttons. My question is, is there any way for using something like this: import 'this.state.style' instead of the import ./App.css in the App.js file? At least my way of thinking got me here, as this looked to be the easiest to do in order to change the stylesheet of the page. There is no big deal in the css files only smooth camera and bg color.
I don't think you can do that, but on the JS side you can change the class of the body element when pressing the button with .TogggleClass(). On the CSS side you just change the css.
the most suitable solution for making simple dark / light mode is by using Context API and useContext Hook it is easier, simpler and more readable than using any other solutions, you can make a whole new themes with this solution. so give it a try and you will definitely enjoy with the result and the experiment.
Related
I am currently using an HTML template and am trying to return those as react components, however when I run the HTML code natively the page looks like this.
However, running the same code being returned by a react component, it is almost as if the components are only taking up half the page. Some of the elements such as the text of the name and collar have been changed but I haven't touched any of the DOM elements so I don't know why the proportions are not correctly outputted. Any advice on how I can combat this issue?
Here are some suggestions:
Check your css.
You have some styling overrides on your react side. Those styles are overriding the ones defined on the html template that you are trying to render. Look for any styling your react app is doing on list items.
Its not exactly a good idea, returning a whole html template from the react component. Since we don't know your use-case, can't give any advice on this.
Try a react component library, if you want to create a similar page using pure react components. Will be a more sensible approach.
I am working on a looping animation modifying the background of a web page. Right now, I have built it with Vue by modifying a variable in Vue's data object bound to a style tag of the page I'm working on. This work's but it's a bit messy and doesn't seem like I am using Vue as intended. I'm wondering if it is better technique to import a library like anime.js or else to use a css animation? Is it overkill/ bad technique to import anime or to load Vue for light animations? What is the rule of thumb with this sort of thing?
You are using simple animations then you can try the List-Transitions in VueJS.
Link: https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions
I am new to React and wanted to create a calculator in React as a practice project. I decided to use CSS modules to style my components. Here is the look of the calculator I want to create
As you can see from the photo of the calculator, there are several buttons and some of them have different width and colors. What I wanted to do is to create ONE button component and reuse it for each button in the calculator. Please can you give a hint about what I can do to theme with CSS modules? Guys, I am kindly asking that you show the right direction not asking you to create that project for me or something like that. I hope you got my point.
Agree with#Noob, Theming would just over complicate the project. You probably just need to create regular class style for the button and apply to the component Button one by one.
<Button className={styles.number}>1</Button>
<Button className={styles.operator}>+</Button>
So I'm thinking of building an app with a dark and a light theme
I have separated into 2 files dark.js and light.js
then im going to have a reducer that gets fired by coming through from a query param to trigger the case to change to light and dark
however, Im stuck at the next part. what would be the best way to then say use either the light/dark file/object?
I was thinking of setting all the css in the reducer but that seems like overkill
has anyone got any good ideas?
I've been loving checking out styled-components, but getting a bit stuck with the concept of extracting everything out into a component, and how to tweak styles for a particular use case. For example:
<Flex>
<MyStyledTitle>Hello I am a Title</MyStyledTitle>
<MyStyledBodyText>blah</MyStyledBodyText>
</Flex>
Let's say that I wanted to make the following customisations for this use case:
styled title grey (subdued text colour),
the body text to have a right margin of 100px (don't ask why).
The styled-components way, the first part could be done like:
<MyStyledTitle colorTint='subdued' />
or even
<MyStyledTitle>
<SubduedText>MyTitle</SubduedText>
</MyStyledTitle>
Perhaps using a prop for title that lets you configure it to use subdued text or ANOTHER hild component that defines the grey text..
But what about for the second option...
<MyStyledBodyText style={{paddingRight: 100}} />
Inline style? Use a Grid or layout component around it?
At which point does something become a specific styled-component and if not, then how does one customise smaller style changes?
While i really like this idea of removing the mapping between component + class name, I guess i'm feeling a bit torn between the classical idea of having a 'style sheet' file that can contain all the classes and modifier css, then using a presenter to choose between the combinations of css classes.
I might be missing something here, but just keen to see some bigger examples of styled components in practice. Any links / tips would be greatly appreciated!
We've been using styled-components in our project extensively. Few basic patterns/conventions we use are
Components created using StyledComponents are not used across React Components. Under extreme scenarios, we pull them into external files and export.
DIV is the most extensively used styled-component (styled.div). (Ofcourse we do use other html elements like button, table td etc., but styled explicitly).
Different styles for the same HTML element (or) React Component are declared explicitly as different styles. (If you refer to FAQ section of the styled-components docs, you might notice these - https://github.com/styled-components/styled-components/blob/master/docs/faq.md)
Overall to answer your question, we have moved away from the classical stylesheet and as well thinking about combining multiple styles. It has worked well, except that looking up on unit tests is a bit painful.
Thanks