I am try to add some CSS to my components. However, when the website renders the custom CSS is always removed. I am styling my own pages and do not override the CSS of third parties, at least not consciously. I am using Material UI and NextJS and realised that while following this
that all server-side CSS is removed. I suspect that this is the issue, but not sure how to work around it. The CSS is just custom to the component and follows the naming convention of Next :
[filename].modules.css
Does anyone know what do do?
Related
I've a next js project in typescript with inbuilt scss. The style loading approach is as per official documentation provided by next js and it's loading fine in browser. But, the issue I'm having is on inital load or when I refresh, the style is loaded only after page loads. So, there is some millisecond of page render without any style. How can I resolve this issue? I've digged around and found solution with jsx styled component. But, since my whole style is in separate scss and the project already in ready state, I can't choose to go that way. Is there any way where I can load scss style even on inital render without any delay of style loading on ssr.
I'm converting an existing React app to use Next.js and I'm having an issue with the production build. I'm using Emotion to add a css prop for styling. The pages in my app render fine until they prefetch links, at which point the styles disappear from the current page. There's some odd intermittent behaviour as well – sometimes when I then refresh the page I can navigate between pages without the styles disappearing but eventually they disappear again. Inspecting the component shows that the value of the css prop has not changed, but the styles are not being applied to the actual element. Has anyone experienced something similar or could point me in the direction of what is causing this?
Checkout my comment on this issue for the library react-select which uses emotion for styling.
https://github.com/JedWatson/react-select/issues/3309#issuecomment-883001216
I was able to get the styled component to render by putting one in _app.tsx and hiding it so it always renders before any other components which may be delayed for one reason or another.
There are a couple other solutions in that thread that may help you as well.
I am using Next JS (v9.2) and Material-UI (4.9.0).
I imported sanitize.css (v11.0.0) in _app.js.
When I am using material-UI outlined text-field, the outline is not displayed.
On removing sanitize.css from _app.js, the outline is displayed.
Is there any way to make material-UI overwrite other CSS?
We don't need to use sanitize.css with Material UI. It already should have what it needs to provide a consistent look across multiple browsers - material-ui.com/components/css-baseline.
So I replaced sanitize.css and used . It solved the problem.
I using the Gatsby Material Starter kit for a personal project (essentially to learn Ract and Gatsby). https://github.com/Vagr9K/gatsby-material-starter
The design I want is to have a homepage that doesn't render the toolbar in the header (the toolbar that containers the hamburger navlist). The homepage has a big body and footer but no header ie a giant 'hero'.
After a few hours of hacking with layouts and templates there must be an elegant way to achieve this design ? Any direction or working code to share ?
All the pages in Gatsby Material Starter are wrapped with a MainLayout component to provide consistent styling.
In it's turn, MainLayout uses the Navigation component to render a NavigationDrawer while passing the styling information to it.
If you want to change the fixed toolbar, then you'll have to replace it with Toolbar and Drawer components from react-md.
NOTE: I would not recommend learning ReactJS like this, since GatsbyJS adds additional complexity (that's specific to it) and starters (or any other pre-made projects like this) aren't easily customizable unless you have previous experience with React.
Disclaimer: I'm the author of Gatsby Material Starter.
Noob Question: Is the intention of the cSS API to make it possible to use the components as normal HTML without the need for any additional React code? Does the usage of only the CSS API therefore require the inclusion of the React JS package or can the Blueprint JS package alone work ?
As an author of Blueprint, I can confirm that it is in fact possible to use some of the Blueprint components via CSS only. Components that describe a CSS API in the documentation can be used without React, but usually with caveats (the biggest being that you must write the markup correctly). The CSS API is presented as an alternative to the JavaScript (React) API, and CSS modifiers are supported by the JS APIs through the className prop.
As Blueprint is a React-based UI toolkit, the best experience will be had by using React, primarily because you no longer have to write the markup correctly.
It is not possible to use the components as normal HTML, without ReactJS. Blueprint is a ReactJS UI toolkit for the web.
Their pre-made (React) components are customizable via a JavaScript API or a CSS API (or both).
The idea behind the CSS API, that some of the components have, is to provide additional options for style customization.
Let's use an example. See the Menu component. Its CSS API allows us to modify Menu's style. One example is that we can add icons to menu items, read in their docs:
Add icons to menu items the same way you would to buttons: simply add the appropriate pt-icon-<name> class*.
PS: I'd recommend you to head over the ReactJS docs, understand how ReactJS components work, get deeper knowledge about the core ReactJS concepts (or complete a fundamentals course) and only then - try to implement BlueprintJS.