When I pass following attributes, Next.js raise warning. Is it a way to avoid?
<div
className="col-lg-6"
data-anima="fade-bottom"
data-time={1000}
></div>
and the warning message:
next-dev.js?3515:24 Warning: Extra attributes from the server: style
at div
at div
at div
at section
at main
at Home
at Layout (webpack-internal:///./components/Layout.tsx:11:26)
at AppProvider (webpack-internal:///./tikexModule/AppContext.tsx:24:26)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3)
at MyApp (webpack-internal:///./pages/_app.tsx:68:27)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:8:20740)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:8:23199)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:9)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:675:26)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:797:27)
This should work on same page, if used on another page for e.g. slug then unfortunately that will disappear upon page refresh.
For example:
HTML element code:
<div
id="myId"
className="col-lg-6"
data-anima="fade-bottom"
data-time={1000}
></div>
Your component code:
const querySelector = document?.querySelector("div[id='myId']");
const time = querySelector?.getAttribute("data-time");
console.log("%c time:", "font-size:24px;background-color:yellow;color:red;", time);
Related
I am displaying sanity block content using [#sanity/block-content-to-react](#sanity/block-content-to-react). The BlockContent component is wrapper by div with class of "prose".
<div className="prose prose-zinc font-display prose-h1:font-normal prose-code:mx-1 prose-code:before:content-none prose-code:after:content-none dark:prose-invert ">
<BlockContent
// Pass in block content straight from Sanity.io
blocks={singleBlog.body}
serializers={serializers}
/>
</div>
In my serializers, I am passing custom <Code/> component.
const serializers = {
types: {
code: (props) => <Code props={props} />,
},
};
In my custom code component, I am using Syntax Highlighter to wrap by code content.
<SyntaxHighlighter style={theme} language={props.node.language}>
{props.node.code}
</SyntaxHighlighter>
But, no matter which theme I choose, it only changes the background colors and font sizes but has no effect in text colors.
I thought 'prose' class on wrapper div was causing the problem. But remove that didn't work either.
{/* <div className="prose prose-zinc font-display prose-h1:font-normal prose-code:mx-1 prose-code:before:content-none prose-code:after:content-none dark:prose-invert "> */}
<BlockContent
// Pass in block content straight from Sanity.io
blocks={singleBlog.body}
serializers={serializers}
/>
{/* </div> */}
Does anyone have any solution ?
I am not sure if you are using a custom theme or if you are using one of the many option. But if you are using the available one that you can find here: https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html
Then it may be a problem with your imports.
If I import the theme like that (using the hljs ): import {dark} from "react-syntax-highlighter/dist/esm/styles/hljs"; I only get background color.
If I import the theme like this using the 'prism' option I get the text color too: import {dark} from "react-syntax-highlighter/dist/esm/styles/prism";
I am trying to move my old static HTML project into Next.js, but the extra
<div id="__next">
is blocking some of class in my css stylesheet(eg. body > section).
I tried to remove the extra div in inspect mode and it works. Just wondering how to remove it from the rendering? Thanks a bunch.
For class based react (can also use in constructor, componentWillMount will be deprecated)
componentWillMount() {
let tar = document.getElementById('__next');
tar.parentNode.innerHTML = tar.children[0].innerHTML;
}
For react hook (Functional component)
useEffect(()=>{
let tar = document.getElementById('__next');
tar.parentNode.innerHTML = tar.children[0].innerHTML;
})
My Angular 2 Dart application has many nested components. If a certain property of one of my components is set to true, a popup is shown.
If this popup is shown I want to add a class to the document body.
Pseudo code example:
<html>
<head>
</head>
<body class="">
<app-component>
<home-component> <!-- with routers -->
<inner-component>
<popup-component>
// if I am active I want to add a body class
</popup-component>
</inner-component>
</home-component>
</app-component>
</body>
</html>
Simple reason: If the popup component is displayed I want to disable body scrolling (overflow-x:hidden;). The popup component is shown if the property bool show_popup within popup_component.dart is set to true.
Unfortunatly in CSS - as far as i know - there is no selector to check this (Is there a CSS parent selector?) - otherwise I would say something like
body:has(.my_popup)
in the main.css file or something similar.
How can I achieve the desired result?
There are two way.
You can use
#HostBinding('class.someclass') bool isSomeClass = true;
in the root component if it has
selector: 'body'
or
document.querySelector('body').classes.add('someClass');
You can use :host-context(...) to style a component depending on a selector matching a parent
:host-context(body.someClass) {
background-color: red;
}
will make the background color red when the body element has class="someClass" set.
I need to implement a Bootstrap-style collapsible panel in React that displays arrow glyphs in the panel header similar to this No JS required example.
I've implemented most of this functionality using react-bootstrap in an unintended way, that results in this browser warning:
< a> cannot appear as a descendant of < a>. See ProjectInfo > a > ... > Panel > a.
Here is the render function of my component:
render() {
const projectHeader =
<a className="accordion-toggle collapsed">
<h4 className="panel-title">Project Information</h4>
</a>;
return (
<Accordion>
<Panel header={projectHeader} eventKey="1">
Project info goes here.
</Panel>
</Accordion>
);
}
Can the requirement for toggling panel header icons be be met using react-bootstrap? If so, how? If not, how is it done using React?
UPDATED 07-DEC-2017: I solved my problem by adding an anchorClass property to the react-bootstrap Panel component in a forked repo.
This is final render function of my component:
render() {
const header = <h4>Project Information</h4>;
return (
<PanelGroup accordion>
<Panel header={header} anchorClass="panel-toggle" eventKey="1">
Project info goes here.
</Panel>
</PanelGroup>
);
}
The panel-toggle classes were defined like those in the No JS required example.
My web app shows body background for a second then it loads the dynamic background when i route from one page to another. I am trying to remove that white flash by adding a splash screen using AngularJS. I looked at some tutorials but were not able to find exact solution.
how do i avoid showing the white body background before my div background loads?
any suggestions?
HTML
<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
<div class="wrapper" ng-style="{'background': backgroundImg}" >
<div class="content-wrapper">
<section class="content">
<div ng-view></div>
</section>
</div>
</body>
my route
$routeProvider.when('/about',{
templateUrl:'partials/about.php',
controller: 'pageController'
});
My controller
app.controller("pageController",function($scope, $rootScope){
$scope.title = "About Us";
$rootScope.backgroundImg="url('http://abounde.com/uploads/images/abt-min.jpg')"; //abt bg
$scope.$on('$viewContentLoaded', function() {
console.log("about page loaded");
});
});
From what I understand, the pb is that when you route to another page then you launch a new request to download your background with your url(...). Because this request can take time then you have your white screen.
So a solution could be to "preload" all background images when you open your app. So before displaying anything on your app you can display a "loading..." div. In background download all your backgrounds.
Once this is done, when changing route then simply change the css class of your wrapper div to the css class containing the correct background image.
On this particular page, you could have a div that wraps the entire document.
Give this div a class with css ie .document-wrapper-invisible
in your css give .display-none class a display property of none
.dislay-none {
display: none;
}
When your view content loaded function runs, remove this class. You can simply set a variable to be true and use ng-class to conditionally remove the class. ie
<div ng-class="{display-none: !documentLoaded}">
// your page content
</div>
in your controller
$rootScope.$on('$viewContentLoaded', function() {
console.log("about page loaded");
$scope.documentLoaded = true;
});
Something along these lines should work (I've only ever used rootScope for the viewContentLoaded event, if $scope works on it's own then great)