I'm trying to append a class to my body tag depending on the locale. So if someone visits from Spain, I will append a class which changes the Tailwind theming to match the branding of that country.
My body tag is located in a custom _document.js file. When I try to import { useRouter } from 'next/router', I get the 'breaking rules of hooks' error in React. I need this hook to detect the locale and therefore append the class if necessary.
Is it possible to use hooks in _document.js? If not, why not?
Related
I am using the "ES7+ React/Redux/React-Native snippets" extension VS Code. I like to use rfc to generate a React functional component based on the name of the file. The issue is I want to use Next.js / next router to handle my pages.
I want the route the browser hits to be /blah/this-is-the-page so the file needs to be /pages/blah/this-is-the-page.tsx. If I run the rfc snippet from this file it creates a function called this-is-the-page ie export default function this-is-the-page() {. The preferred behavior, when there are dashes in the file name, would be to use PascalCase like this: ThisIsThePage ie export default function ThisIsThePage() {.
Is there a way to customize or indicate to this snippet extension to use PascalCase in this situation?
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
I'm working on films searcher in React. The API I'm using does not have full data on every single film, some of them do not have an image. I want to put a placeholder name (possibly an image) where there should a photo, but there is no data. I do not know how to create a function that will check if the image is available. Any idea?
If you use propTypes in your React application, you can add a default there.
https://reactjs.org/docs/typechecking-with-proptypes.html
Alternatively, you can use a conditional (ternary) operator in your script as you did in your TitleComponent.jsx.
In that case you just have to import the default image to your component first.
import defaultImg form '..images/default.jpg'
I am using Material UI for building my React Project.
However there is a component which has to be embedded to a different site. Meaning, I am providing the production build of this component to embed it to a different site.
My React app's css is getting overridden by the global styles defined in that website.
I don't want this behaviour. Is there any way I can isolate the css of my react app and the global css of the other website.
I saw this question but the solutions didn't help me.
If iframes and Web Components are out of the question, the only remaining option is CSS resets.
Create a CSS class and a series of rules that reset the styles of any elements that occur inside that class.
.my-reset {
/* Global resets (e.g. font family) */
}
.my-reset p {
/* Reset paragraph styles */
}
.my-reset label {
/* Reset label styles */
}
/* etc. */
Apply that class to the root-level component:
function MyApp() {
<div className="my-reset">
{ /* app goes here */ }
</div>
}
There are plenty of CSS reset libraries out there. Since you have no control over global styles, you're going to have to be heavy handed with the resets. So if it's at all possible, make your component embeddable as an iframe.
I see multiple solutions to this problem
Use !important in those styles possible.
Use id to give styling instead of class, as id has higher presidence.
If you give more specific styling to the elements then the build file css will override the outer site's css, i.e like if we write our css like .parent#child this is more specific styling and it will override the wrapper site's css.
Check this out https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
There's another sort of scrappy solution that you could use in the case where you don't need the old table style and the new Material-UI tables on the same HTML page.
If you own the site that you are trying to embed the React app in (i.e., you have control over the new environment's CSS), another thing you could do to reset the CSS styles for the components in your app is to remove the classes that are overwriting your styles.
For example, if you're using Material-UI tables and your existing table styles are affecting the render, you could put the existing table styles into a separate CSS file that you only import when you render your existing tables, on another HTML page.
The Bootstrap Table header is not aligned with the data, am I missing any style? I'm using
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
I have marked in the attached picture where this.setState is not working in a function within private method.
I've fixed the header alignment issue by
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
exists possibility and using default Bootstrap code in need component, but in this case you must use CDN links who is need for normal work of Bootstrap from index.html file in your app
Is there a class name convention used in material ui library? I'm currently using material-ui-next. I notice class names like "MuiFormControl-root-124" all over the place with numbers appended to class name. For Paper element "MuiPaper-root-18 MuiPaper-shadow2-22 MuiPaper-rounded-19". I just can't see a pattern here.
Is there a convention which I'm missing. It would be easier to understand this framework if it made sense like Bootstraps grid classes. All help much appreciated. Thank you.
In material-ui v1, class names are non-deterministically generated at run time, so there is no convention you should adhere to. That's described here in the docs:
You may have noticed that the class names generated by our styling solution are non-deterministic, so you can't rely on them to stay the same.
However, that does not matter because you should never be using raw CSS class names in the first place. Instead, you use withStyles to set the appropriate styles for each component:
import { withStyles } from 'material-ui/styles';
// Define the CSS styles you which to apply to your component
const styles = {
root: {
backgroundColor: 'red',
},
};
class MyComponent extends React.Component {
render () {
// withStyles automatically provides the classes prop, which
// will contain the generated CSS class name that you can match
// to your component
return <div className={this.props.classes.root} />;
}
}
export default withStyles(styles)(MyComponent);
These non-deterministic class names have technical benefits, including improved performance:
Thanks to the non-deterministic nature of our class names, we can implement optimizations for development and production. They are easy to debug in development and as short as possible in production.
You should note that this happens because material-ui takes a fundamentally different approach to styling than a library like Bootstrap. While Bootstrap has a CSS library with defined class names that get applied to each element, material-ui uses CSS in JS to inject styling. This allows CSS to be defined and stored alongside the JavaScript definition of each component.