[BUG] When using SSR I get a dom mismatch

[izaacdb]

Describe the bug

When using NextJS I see
Warning: Expected server HTML to contain a matching <span> in <nav>. in span (created by Styled(styled.span)) in Styled(styled.span) (created by Pagination).
This warning only shows up when I use pagination.

To Reproduce

Steps to reproduce the behavior:

1. npx create-next-app --example with-typescript-styled-components with-typescript-app
2. yarn add react-data-table-component
3. copy the example data table, add 11 records
4. enable pagination
5. yarn dev
6. see error in console, compare view source to rendered code

Expected behavior

<span class="sc-fznxKY sc-fznMAR jMFmnk">1-10 of 537</span> should be rendered on server and client

Versions (please complete the following information)

• next@9.5.1
• styled-components@5.1.1
• react-table@7.5.0

[erikt9]

I've been unable to get SSR working with style-components@5, you may want to try version 4 and see if you have any luck with that. Also make sure to be using the babel-plugin-styled-components with your build if appropriate.

[izaacdb]

v5 seems to work fine for me other than this issue. I am using that plugin and some Babel configuration.

[jbetancur]

TBH I have next to no experience using next.js. Is this just a warning or do things actually break Pagination? I'm really curious if there is some side effect with styled-components composition and nextjs. For example, the span that has the rows count Range is derived from a common span.

react-data-table-component/src/DataTable/Pagination.js

Lines 50 to 57 in 5fa8a9b

	const Span = styled.span`
	flex-shrink: 1;
	user-select: none;
	`;
	const Range = styled(Span)`
	margin: 0 24px;
	`;

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[abdulsamadayoade]

Is there any fix for this @jbetancur @izaacdb . I've been facing this same issue for sometime now

[kayotimoteo]

same problem here