I'm starting to work with react and have to build a clock component.
I want my parent div to have the same height as a child component. Why doesn't child height affect it's parent height?
HTML:
import React, { useState, useEffect } from "react";
import "./clock.scss";
export const Clock = () => {
let [date, setDate] = useState(new Date());
useEffect(() => {
let timer = setInterval(() => setDate(new Date()), 1000);
return function cleanup() {
clearInterval(timer);
};
});
return (
<div className="clock-wrapper">
<span className="test">
{date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
</span>
</div>
);
};
export default Clock;
SCSS (other components don't have css yet). Class "test" - green container. Class "clock-wrapper" - red container.
.dashboard {
display: flex;
justify-content: space-between;
padding: 25px 40px 25px 40px;
}
.clock-wrapper {
$_size-100: 100px;
}
.test {
color: $color-pickled-bluewood;
font-size: $_size-100;
font-weight: bold;
}
Image with current result. Red border is parent size. Green border with background color is children component.
Thanks for your help.
Related
I have a component like this:
// MyComponent.tsx
export function MyComponent(): React.ReactElement {
return <Wrapper>
<Text>
hello there
</Text>
<AnotherText>
bye bye
</AnotherText>
</Wrapper>
}
export const Wrapper = styled.div`
color: #FEB240;
background: #f5f5f5;
padding-bottom: 5rem;
padding-left: 7rem;
padding-right: 7rem;
gap: 2rem;
`;
export const Text = styled.span`
width: 50%;
cursor: pointer;
color: rgba(28, 33, 120, 1);
`;
export const AnotherText = styled.span`
color: red;
`;
I want to be able to style the wrapper. I tried to like this (from this answer Styling Nested Components in Styled-Components), but I don't see any change:
// AnotherPlace.tsx
const NewlyStyledMyComponent = styled(MyComponent)`
${Wrapper} {
color: brown;
background: magenta;
}
`;
It seems that MyComponent also need to take (generated) className as props and assign it to the root wrapping element to make the nested styles to work as expected.
Simplified live demo: stackblitz
A basic example in MyComponent:
import styled from 'styled-components';
interface Props {
className?: string;
}
export const Wrapper = styled.div`
background-color: hotpink;
`;
export const Text = styled.span`
color: #fff;
`;
function MyComponent({ className }: Props) {
return (
<div className={className}>
<Wrapper>
<Text>Hello</Text>
</Wrapper>
</div>
);
}
export default MyComponent;
And at where it is imported and used:
import styled from 'styled-components';
import MyComponent, { Wrapper, Text } from './MyComponent';
const NewlyStyledMyComponent = styled(MyComponent)`
margin-bottom: 7px;
${Wrapper} {
background-color: indigo;
}
${Text} {
color: gold;
}
`;
function App() {
return (
<div>
<NewlyStyledMyComponent />
<MyComponent />
</div>
);
}
export default App;
There are indeed 2 issues:
To style a custom React component (even just so that its nested components can be styled), you always need to take a className prop and to apply it on one of your rendered elements, as explained in styled-components docs:
The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element.
To style nested components, the className of the parent element must be applied on a parent DOM element as well; that is why JohnLi's answer has to add an extra <div className={className}> around the <Wrapper>.
But in your case, you could just style MyComponent and apply the className on the <Wrapper>:
export function MyComponent({
className
}: {
className?: string;
}): React.ReactElement {
return (
// Apply className directly on the Wrapper
<Wrapper className={className}>
This text can be re-colored
<Text>hello there can be re-colored if styling nested Text</Text>
<AnotherText>bye bye</AnotherText>
</Wrapper>
);
}
const NewlyStyledMyComponent = styled(MyComponent)`
/* Directly style MyComponent */
color: brown;
background: magenta;
/* Styling of nested components */
${Text} {
color: white;
}
`;
Demo: https://codesandbox.io/s/vibrant-worker-05xmil?file=/src/App.tsx
Here:
Open the app in desktop width, notice the div has green background
Reduce browser width to mobile, the div background should change to gray
Again, increase browser width to desktop, notice the gray background remains, instead of green
What should have happened
The background in last step should be green as in the first step, isn't it?
Logging value of isMobile does seem to show it is being updated.
Here is also code:
import React from 'react';
import styled from 'styled-components';
import { useMediaQuery } from 'react-responsive';
let MenuItem = styled.div`
height: 100px;
width: 100px;
border:1px solid red;
background-color: green;
// Select those items which are children of .submenu
.submenu & {
background-color: ${({ isMobile }) => {
return isMobile && 'lightgray';
}};
}
`;
function App() {
const isMobile = useMediaQuery({ query: '(max-width: 524px)' });
return (
<div>
<div className="submenu">
<MenuItem isMobile={isMobile}>test</MenuItem>
</div>
</div>
);
}
export default App;
import React, {useEffect, useState} from 'react';
import styled from 'styled-components';
import {useMediaQuery} from 'react-responsive';
let MenuItem = styled.div`
height: 100px;
width: 100px;
border:1px solid red;
background-color: green;
`;
function App() {
const isMobile = useMediaQuery({query: '(max-width: 524px)'});
const [color, setColor] = useState('green');
useEffect(() => {
if (isMobile) setColor('silver');
else setColor('green');
}, [isMobile])
return (
<div>
<div className="submenu">
<MenuItem style={{background: color}} isMobile={isMobile}>test</MenuItem>
</div>
</div>
);
}
export default App;
You could re-write this as:
const MenuItem = styled.div`
height: 100px;
width: 100px;
border:1px solid red;
background-color: green;
`;
const SubMenu = styled.div`
${MenuItem} {
background-color: ${({ isMobile }) => (isMobile ? `red` : 'lightgray')};
}
`;
function App() {
const isMobile = useMediaQuery({ query: '(max-width: 524px)' });
return (
<>
<SubMenu isMobile={isMobile}>
<MenuItem>MenuItem in SubMenu</MenuItem>
</SubMenu>
<MenuItem>MenuItem</MenuItem>
</>
);
}
Stackblitz
It is the correct answer:
https://stackblitz.com/edit/react-t7gqwx?file=src%2FApp.js,src%2Findex.js
You shouldn't use .submenu &.
I am using nextjs to compile my code and antd framework. I am unable to style the positioning of my button, also I want my start button to trigger a set of buttons but for some reason it does not work. Below is my code
import React, { Component } from "react";
import Layout from "./Layout";
import { Radio } from "antd";
export default class PositiveAffirmation extends Component {
state = {
changeButton: false
};
toggleChangeButton = e => {
this.setState({
changeButton: e.target.value
});
};
render() {
const { changeButton } = this.state;
return (
<Layout>
<Radio.Group
defaultValue="false"
buttonStyle="solid"
onChange={this.changeButton}
className="radio-buttons"
>
<Radio.Button value={true}>Start</Radio.Button>
<Radio.Button value={false}>Stop</Radio.Button>
</Radio.Group>
{changeButton && (
<Button.Group size={size}>
<Button type="primary">Happy</Button>
<Button type="primary">Sad</Button>
<Button type="primary">Fullfiled</Button>
</Button.Group>
)}
<style jsx>{`
Radio.Button {
font-size: 100px;
margin-left: 20px;
margin-top: 5px;
margin-bottom: 5px;
display: flex;
justify-content: center;
}
`}</style>
</Layout>
);
}
}
you are calling just wrong fn change onChange={this.changeButton} to onChange={this.toggleChangeButton}
I am using react and have a circle component that I want to map on the screen. The problem is at certain view sizes I get small artifacts in the circles. Flat ends and only on certain rows of circles.
Circles have flat sides at view width 980px
ball hitbox
container hitbox
.ballholder{
display:flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color:rgb(206,35,212);
padding:0.5vw;
border-radius: 5%;
border:2px solid black;
}
.aball{
background-image: linear-gradient(to bottom right, white, whitesmoke, rgb(150,150,150));
color:black;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
width:2vw;
height:2vw;
padding:0.05vw;
margin:0.20vw;
font-size:1.3vw;
}
Here's the parent component:
import React, { Component } from "react";
import { Switch, Route, Redirect, Link } from "react-router-dom";
import Ball from "./Ball";
import "../App.css";
export default class Ballswitch90 extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const balls = this.state.balls.map((a, i) =>
a ? (
<Ball p={{ num: i + 1, clicked: false }} />
) : (
<Ball p={{ num: i + 1, clicked: true }} />
)
);
return <div className="ballholder">{balls}</div>;
}
}
Ball component:
import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from "react-router-dom"
import '../App.css'
export default class Ball extends Component {
constructor(props) {
super(props)
this.state = {
num:props.p.num,
clicked:props.p.clicked
}
}
render() {
return (
<div>
{this.state.clicked
?
<div className="aball">{this.state.num}</div>
:
<div className="aballred">{this.state.num}</div>
}
</div>
)
}
}
I've tried adding a padding and margin but that only changed the size at which the flats show up.
Probably the css rules with height and width make some problems.
You can see this snippet that works well:
https://codesandbox.io/embed/n6jrm1k2l
aball {
border-radius: 50%;
background-color: white;
border: 1px solid darkred;
padding: 1em;
/* Center the text contents */
display: inline-flex;
align-items: center;
justify-content: center;
color: black;
}
.aball:after {
content: "";
display: block;
/* Ensure the element is a square */
height: 0;
width: 100%;
padding-bottom: 100%;
}
.aball__value {
/* Set the height to 0 and overflow to visible to not interfere with the square styles */
overflow: visible;
height: 0;
/* Vertically center text since we set its height to 0 */
margin-top: -1em;
}
Is it possible to display the popup of a vertical submenu "the other way around" ? I have one SubMenu item in a fixed Sidebar at the bottom of my page. It contains links for the users profile and the logout link. But since it is at the bottom of the page the submenu will open and part of it is outside the of the page.
Here is a screenshot of the current situation.
I searched for options the documentation but I couldn't find a suitable solution for the problem. So basically what I want to achieve is growing the popup from bottom to top and not top to bottom.
Here is the source for the Sidebar component. It is quite a early stage so there are still other improvements to the code to do.
import React from 'react';
import { connect } from 'react-redux';
import { Layout, Menu, Icon } from 'antd';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import { toggleSidebar } from '../../actions/ui';
import { logoutUser } from '../../actions/user';
const { Sider } = Layout;
const SubMenu = Menu.SubMenu;
const Logo = styled.div`
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
`;
const UserMenu = styled(SubMenu)`
position: fixed;
text-align: center;
bottom: 0;
cursor: pointer;
height: 48px;
line-height: 48px;
color: #fff;
background: #002140;
z-index: 1;
transition: all 0.2s;
`;
const mapStateToProps = state => ({
ui: state.ui
});
const mapDispatchToProps = dispatch => {
return {
toggleSidebar: () => dispatch(toggleSidebar()),
logoutUser: () => dispatch(logoutUser())
};
};
class Sidebar extends React.Component {
componentDidMount() {}
render() {
const { ui, logoutUser } = this.props;
return (
<Sider
collapsed={ui.sidebarCollapsed}
//onCollapse={toggleSidebar} // toggle is disabled
style={{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0
}}
>
<Logo />
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
<UserMenu
key="sub1"
placement="topLeft"
title={
<span>
<Icon type="user" />
<span>User</span>
</span>
}
>
<Menu.Item onClick={logoutUser} key="3">
Logout
</Menu.Item>
<Menu.Item key="4">Profile</Menu.Item>
</UserMenu>
</Menu>
</Sider>
);
}
}
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps
)(Sidebar)
);
Is there a way to achieve this ?
Yes it should be possible. <Menu>uses the rc-menu package, and supports all the properties from this package, even if they are not documented in the and.design doc page.
Menu position is guided by the builtinPlacements property, which in turn uses https://github.com/yiminghe/dom-align, which gives you lot of flexibility in how to position the elements.