I have a Page component in my React application with the size of A4 page. Inside this Page component I have multiple different nested children. However I came across a problem.
Problem lays when children of one Page component overflow it's height. How can I create another instance of Page component and move children that are overflowing to that component. Also, if possible, for solution to be recursive because n Page component can also have children that are overflowing it's height.
I tried multiple different solutions but all of them were either ineffective or full of bugs.
I have a page component:
const Page = ({ children }) => {
return <div style={{ width: A4.width, height: A4.height }}> {children} </div>
}
And this is in some particular container:
const Container = () => {
return (
<Page>
<div className="child" />
<div className="child" />
{/* This should be moved into another Page instance programmatically */}
<div className="child" />
</Page>
}
}
And this is my CSS:
.child {
position: relative;
width: 100%;
height: 50%;
border: 2px solid black;
}
NOTE: This question does not refer and is not identical as this one: How to make a HTML Page in A4 paper size page(s)?
I need a way to dynamically create containers and append children from previous containers that are overflowing the height of said previous containers.
I want to ask how to display the Sample Title Bar in the Icon Window Max section only and this is my coding.
import React from 'react'
import { TitleBar } from 'react-desktop/windows';
export default function App() {
return (
<div style={{
display: 'block', width: 400, paddingLeft: 30
}}>
<h4>React Desktop Windows TitleBar Component</h4>
<TitleBar
title="Sample TitleBar"
controls
isMaximized="true"
background="orange"
/>
</div>
);
}
And want to show the Icon Window Max
before:
after:
Here is the code I got the link coding from: Link
As pert react desktop documentation they only provided support to hide/show all three control, there is no such specific prop which we can use to hide individual tool from title bar.
So if we want to hide the other two option apart from maximize we can use css and overwrite existing css in following way
.titlebar a[title="Close"],
.titlebar a[title="Minimize"] {
display: none !important;
}
I have given class to Titlebar component and hide element using css.
Codesandbox
I am having issue of large white spaces appearing on the right and the bottom of the web page. When testing for responsiveness of the web page.
I found a similar issues on stackoverflow
White space showing up on right side of page when background image should extend full length of page [closed]
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
Solution in both the posts are same
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
I don't know where exactly to add this in the gatsby, I found a post with a similar issue to mine regarding gatsby How do I style the body / background?. Don't seem to understand what is the solution for this!
Found this post How to add a dynamic class to body tag in Gatsby.js? got some idea about using react-helmet, how exactly I can use it?
Could anyone explain how I can set the html body in gatsby, to avoid this large white space?
Resolution 1366x768 area under the bounder is the whitespace
Resolution 1920x1080 area under the bounder is the whitespace
To add global styles (such as the ones you're talking about), you have multiple ways to follow. The easiest one is to use gatsby-browser.js file. I will provide a solution for your use-case based on my paths, adapt it as you wish.
Create a global.css file in /src/styles/global.css and paste your code:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
In your gatsby-browser.js file, import your global styles:
import './src/styles/global.css';
Basically, you are adding global styles using CSS files for your project.
There's a huge lack of details in your question but I guess that white part is the footer of the site. Since you don't have any content pushing the footer at the bottom of the page, it appears flexible as it could.
P.S: I've committed How to add a dynamic class to the body tag in Gatsby.js?'s solution since you don't need to add dynamic classes. To make the footer always sticky at the bottom of the browser, you need to make a few adjustments. Wrap your <Layout> with something like:
import React from "react"
import Navbar from "./navbar"
import Footer from "./footer"
import Sidebar from "./sidebar"
import '/yourStyles.css'
const Layout = ({ children }) => {
return (
<section className="site-wrapper">
<main>{children}</main>
<Footer />
</section>
)
}
export default Layout
And add the following CSS (in your /yourStyles.css or in your global styles)
.site-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex-grow: 1;
}
Basically, you are telling the wrapper (site-wrapper) to expand until filling the viewport (100vh). Since your main tag (change it to the desired class if needed) can grow free (flex-grow: 1) so your footer will be always at the bottom of the page because it's pushed by the rest of the flexbox column.
I'm about to build a small project in react using styled component, however, I have a question for using this package. I would like to create a styled component that brings together several classes but I don't know how to do, for example :
<div class="search-input search-input-small">
How to turn it into a styled component ? In css there are two different classes, but in styled component i don't know.
Thank you.
There are a few ways to do this. For example, you could run with the base styling on a styled component and then "upgrade that with the additional styling.
const Div = styled.div`
/// styles for className -> search-input
}`
const SmallDiv = styled(Div)`
/// styles for className -> search-input-small
`
Also, if you know SASS you can structure your CSS with nesting using &. e.g.
const Div = styled.div`
.search-input {
//CSS
&-small {
//CSS
}
}
`
With styled-components, you can go with a similar format.
Here we are creating a styled component named Div, within the styled component I've declared classes .search-input and .search-input.search-input-small to style the div from your example.
The Div is being treated as a parent container.
const Div = styled.div`
display: flex;
background-color: black;
.search-input {
background-color: blue;
}
.search-input.search-input-small {
color: white;
}
`;
We call the newly created styled component like this:
export default function App() {
return (
<Div>
<div className="search-input search-input-small">Hello</div>
</Div>
);
}
As you can see the <div class="search-input search-input-small"> from your example is a child to the parent Div. The parent Div does not require styles but I have included them for this example.
Also here is a codesandbox with a working example.
Who knows how to customize Ant.design styles in proper way?
For example, I want to change the default backgroundColor and height of Header section:
import React, { Component } from 'react';
import { Form, Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
export default class Login extends Component {
render () {
return (
<div>
<Layout>
<Header style={{backgroundColor: '#555555', height: '5vh'}}>header</Header>
<Layout>
<Content>main content</Content>
</Layout>
<Footer>footer</Footer>
</Layout>
</div>
)
}
}
Is it ok, or there is a better way to customize styles?
Because I have not found some component's attributes or smth. like this.
Antd has externized most of their styling variable in LESS variables
as you can see in
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
To be able to overwrite those variables you need to use modifyVar function from LESS
you can find more about theming here
So to your specific question, #layout-header-background does the job
This is how i customized the default antd styles in a particular component
In scss or less
.booking_information_table {
:global {
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
padding: 0 0 !important;
background-color: unset;
border: none;
overflow-wrap: break-word;
}
}
}
In js file
after the import statement
import styles from './component.module.less'
In return
<Table
dataSource={bookingInformationDataSource}
columns={bookingInformationColumns}
pagination={false}
className={styles.booking_information_table}
/>
My personal approach (I'm working with dva-cli though):
Every time I need to override the CSS, I use a CSS file located in the same folder and import it such as:
your-component.js:
import styles from './your-stylesheet.css';
...
< AntdComponent className= {styles.thestyle} />
your-stylesheet.css:
.thestyle {
background-color: '#555555';
}
In the less file(like a CSS) you can handle customize styles. For
example in your case
.ant-layout-header{
height: 100vh;
background-color:#f50;
}
If you use Ant card
.ant-card-head{color:#j14}
I hope you can understand now
The above mentioned approaches work for simple components like Header but don't always work for complex components like Menu, Tabs, Collapse, Select, and others, due to styles nesting priority. At work we use the approach described by jayanes but we go deeper into nested Ant Design classes. Let me explain it in the following example: when you import Tabs from "antd", you have only 2 tags to override styles for: Tabs and TabPane.
<div className={styles.tabsContainer}>
<Tabs className={styles.tabs}>
<TabPane className={styles.tabPane}>
Tab 1 Title
</TabPane>
</Tabs>
</div>
But this antd component has a very complex structure. You can verify in dev tools: it has .ant-tabs-bar, .ant-tabs-nav-container, .ant-tabs-tab-prev, .ant-tabs-tab-next, .ant-tabs-nav-wrap, .ant-tabs-nav-scroll, .ant-tabs-tab-active, .ant-tabs-ink-bar and others.
The way to go is: in your less file nest the .ant-... classes inside your own parent component's className (in order to avoid overriding all the antd classes in the whole app after code compilation). Write there your own css properties, for example:
.tabsContainer {
.ant-tabs-tab-active {
background: #fff266;
color: #31365c;
&:hover {
color: darken(#31365c, 5%);
}
}
.ant-tabs-ink-bar {
background: #fff266;
}
}
If you still need more detailed explanation, please refer to the video I posted on YouTube on how to customize Ant Design components - tabs.
Override the component style
Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.
Override the component style
Customizing Antd theme Colors can be a hassle thus, I created a package that allows you to change them easily with post CSS you can even change them to CSS variables and change them in runtime.
For more info https://www.npmjs.com/package/ant-post-css-theme