I am trying to add page transitions to my Nextjs app. What should I do to add that?
You can use libraries like Framer Motion or Barba js.
You can install the dependency react-transition-group
$ npm install react-transition-group
create a transition_sample.js or transition_sample.tsxcomponent in the component folder
Next, import the transition_sample.js or transition_sample.tsx component to your layouts/MainLayout or _app.js or _app.tsx if you're doing this in the _app.js/_app.tsx be sure to replace children with <Component {...pageProps} />
Import useRouter from next//router and pass the pathname to location props
All done then use the MainLayout in your pages and to use the layout wrap your pages with MainLayout.
Related
I am trying to import a component from an external project into my storybook. I imported it, for example, a custom Button, but the style is not being rendered, it shows only the default html button style and not my styled-component.
I also tried importing it in .storybook/preview.js like the other scss files and bootstrap library, but still, the styled-components style is not being rendered.
import Button from "..filelocation"
For storybook you can make a global (storybook folder) css style by making a .storybook/preview-head.html file and adding your css there via css. source: https://storybook.js.org/docs/react/configure/styling-and-css
However you can also just add a styles.css inside your storybook component and call it with import './styles.css';
I have an app with html:
<div id="react-root-navbar"></div>
<div id="react-root-body"></div>
and corresponding React components that call React.DOM.render on each div.
Both React components use Material UI components. Thus, a set of inline styles are injected for each component.
The problem is that all styles for the second component will be further down in the HTML than for the first component, thus these CSS rules will be higher priority. This interrupts the intended cascading flow and results in lots of incorrect styling. For example, .MuiAppBar-colorPrimary is overruled by .MuiPaper-root:
I know that the ideal solution would be to have all components within a single React app and prevent duplciate imports in the first place. This isn't possible with the codebase I'm working with, however, which uses a Django frontend migrating one piece at a time to React.
Is there any way to make the styling exported by Material UI for each component scoped specifically to that component, so that the styles do not overwrite each other?
MUI has a component StylesProvider that allows you to adjust how styles are added. StylesProvider has a prop generateClassName to which you can pass a generator to determine how class names are generated.
You can create a generator using a MUI function createGenerateClassName, to which you can pass the option disableGlobal to add simple suffixes to class names so that each app will have scoped CSS applied to it.
I was already wrapping all MUI components in a component MUIThemeProvider to use the MUI component ThemeProvider. I just added StylesProvider to this wrapper:
const generateClassName = createGenerateClassName({
disableGlobal: true,
});
return (
<StylesProvider generateClassName={generateClassName}>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
</StylesProvider>
)
I have a navigation component with custom routes. Now i want to make the
link active when visiting a page. But i cant find the right solution
because i am also using laravel. So what i need is to use react-router-dom with the react dom render method or something like that.
I am using the navigation in the header component and importing the header component in my pages.
Does someone have an idea how to fix this. Or what what direction i
should look.
index.js
if(document.getElementById('home__page')) {
ReactDOM.render(
<Home />,
document.getElementById('home__page')
);
nav.js
<nav>
<ul><li>home</li></ul>
</nav>
I could make 10 different pages and add routing to each of them and then render them in my index file. But that doesn't sound great.
react-router-dom includes a NavLink module which will render a <a/> element for you and has some built-in props you can use. For instance the activeClassName prop. This className will be applied to the element when the appropriate Route is active.
<NavLink to="/some-path" activeClassName="active">Link</NavLink>
When you define a react-router-dom Route to "/some-path" and this is the currently active path, the "active" className will be applied to the link element. You can use this className to change the styling for currently active links.
See the example here in the docs: https://reacttraining.com/react-router/web/guides/basic-components/navigation
my solution is using jquery to manipulate dom elements after loading
$(function () {
const menuLink = location.pathname;
if (menuLink === '/') {
$('.menu a[href^="/"]').first().addClass('active');
} else {
$('.menu a[href^="/' + menuLink.split("/")[1] + '"]').addClass('active');
}
});
I am having hard time understanding how I should structer my project.
I am using react with material UI and css modules.
Problem is that god knows why, all styling from MUI loads at the bottom of the header same as css module styling.
After some research I found two solutions:
Use !important inside css modules which is terrible.
Changing the injection order https://material-ui.com/guides/interoperability/#css-modules
Problem with the second one is that it would be terrible tedieouse in a multi component project where every time you introduce a new component you have to load it manually as in the example. Am I missing something obvious? Do you have any ideas how to easier change the load order?
According to the Material-UI documentation, you should add a <StylesProvider/> component, which wraps your component tree.
import { StylesProvider } from '#material-ui/core/styles';
<StylesProvider injectFirst>
{/* Your component tree.
Styled components can override Material-UI's styles. */}
</StylesProvider>
If injectFirst is set (and true of course), the Material UI style tags will be injected first in the head (less priority)
I think you may be misunderstanding something in the example. There isn't anything you need to do on a per-component basis to change the load order.
The steps are as follows:
1. In your index.html add a comment like <!-- jss-insertion-point --> into the head where you would like the jss CSS to be inserted.
2. In your index.js (or somewhere at or near the top of your rendering hierarchy) create the jss configuration to indicate the name of the insertion point comment:
import JssProvider from "react-jss/lib/JssProvider";
import { create } from "jss";
import { jssPreset } from "#material-ui/core/styles";
const jss = create({
...jssPreset(),
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
insertionPoint: "jss-insertion-point"
});
3. Wrap your top-level element in the JssProvider to put those configurations in play (no component-specific steps):
function App() {
return (
<JssProvider jss={jss}>
<div className="App">
<Button>Material-UI</Button>
<Button className={styles.button}>CSS Modules</Button>
</div>
</JssProvider>
);
}
I've created a CodeSandbox similar to the one pointed at by the Material-UI documentation except that this one uses the create-react-app starting point, so the dependencies are simpler.
In version 5 MUI changed the import and some components became deprecated.
By default, the style tags are injected last in the <head> element of the page. They gain more specificity than any other style tags on your page e.g. CSS modules, styled components.
Not in the documentation, but the StyledEngineProvider component has an injectFirst prop to inject the style tags first in the head (less priority):
<StyledEngineProvider injectFirst>
<MUIThemeProvider theme={theme}>
{children}
</MUIThemeProvider>
</StyledEngineProvider>
I'm having trouble implementing nested routes within react native using react router v4.
If the nested route is declared in App.js it works fine, however when it is declared within another component, redirecting doesn't work.
I was trying to follow the documentation here: https://reacttraining.com/react-router/core/guides/philosophy/nested-routes
Is it something simple?
I've created a simple repo which has all the code to replicate:
git clone https://github.com/814k31/TestReactNativeRoutingv4.git
cd TestReactNativeRoutingv4
npm install
npm run <platform>
https://github.com/814k31/TestReactNativeRoutingv4
Thanks to the react guys on concord
I needed to use relative links otherwise the router would look for a route within the root component (App.js) and wouldn't know about the nested route.
const Tacos = ({ match }) => (
// here's a nested div
<div>
<Route exact
path={`${match.url}/Carnitas`} // The "match.url" is critical here
component={Carnitas}
/>
TACOS
<Redirect to={`${match.url}/Carnitas`} push /> // And here
</div>
)