I am new to primereact. I wanted a custom toolbar like in material-ui.
<AppBar>
<Toolbar>
<h4> App Header </h4>
</Toolbar>
</AppBar>
But primereact's toolbar isn't accepting children. Any way to fix?
Based on PrimeReact's Documentation, Toolbar provides left and right templates to place content at these sections. But if you would like to achieve a Toolbar same as material-ui you should do something like this:
import "./styles.css";
import { Toolbar } from "primereact/toolbar";
import "primereact/resources/themes/saga-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
export default function App() {
return (
<>
<Toolbar left={<h4> App Header </h4>} />
</>
);
}
But after rendering the component, seems it doesn't the thing you would like to achieve and its in the consequence of toolbar style. Thus for changing style of toolbar you need to add this styles:
.p-toolbar {
position: fixed;
left: auto;
top: 0;
right: 0;
width: 100%;
padding: 0 1rem !important;
}
Related
Hi everyone i learning ant design with React + typescript. i need to override some default styles in Menu.Item components. but i have a problem with remove border-right style when user click that Menu.Item using styleComponent. i don't know the exact way but i inspect that component and i picked the className from inspection and made border-right: 3px solid transparent
but still it didn't work for me Here is the code i attach below
import { Layout, Menu } from "antd";
import React from "react";
import styled from "styled-components";
import { Flex } from "../styleComponents/commonUtilsStyles";
import {
MenuUnfoldOutlined,
MenuFoldOutlined,
UserOutlined,
VideoCameraOutlined,
UploadOutlined,
} from "#ant-design/icons";
import SubMenu from "antd/lib/menu/SubMenu";
const MenuItem = styled(Menu.Item)`
.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
border-right: 3px solid transparent !important;
}
`;
const { Header, Sider, Content } = Layout;
const FlexContainer = styled(Flex)`
background-color: white;
box-shadow: 6px 6px 32px #cccccc, -6px -6px 32px #f4f4f4;
`;
const HeaderContainer: React.FC = () => {
return (
<>
<Layout>
<Sider>
<Menu mode="inline">
<SubMenu key="submenu" title="number">
<MenuItem className="no-border" key="1">
one
</MenuItem>
<MenuItem className="no-border" key="2">
two
</MenuItem>
<MenuItem className="no-border" key="3">
three
</MenuItem>
</SubMenu>
<MenuItem className="no-border" key="11">
one 1
</MenuItem>
<MenuItem className="no-border" key="21">
two 1
</MenuItem>
<MenuItem className="no-border" key="31">
three 1
</MenuItem>
</Menu>
</Sider>
</Layout>
<h1>hello</h1>
</>
);
};
export default HeaderContainer;
output
but i need to remove that border line style when user click that menu it
Create a css file and set the border-right property to 0px for following classes to remove the right border.
index.css
.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
border-right: 0px;
}
Screenshot:
I found the best way is using Emotion React
import styled from "#emotion/styled";
import { Menu } from "antd";
and then overwrite the style (you need to inspect to know the antd css class)
/**
* ant-menu-item:hover::after
* ant-menu-item-selected
* ant-menu-item-selected:after
*/
const CustomMenu = styled(AntMenu)`
&& .ant-menu-item:hover::after {
border-bottom: 0px solid transparent;
}
&& .ant-menu-item-selected {
background-color: #EEF6F7;
border-top: 4px solid #B80012;
border-radius: 0px;
color: #B80012;
}
&& .ant-menu-item-selected:after {
border-bottom-width: 0px;
border-bottom-color: transparent;
}
`;
Finally, use it as a component
return (
<ConfigProvider theme={theme}>
<CustomMenu
onClick={onClick}
selectedKeys={[current]}
mode="horizontal"
items={menuItems}
{...props}
/>
</ConfigProvider>
);
This is how I test in Storybook
Custom AntDesign Horizontal menu
EXPLAINATION
Why can we do this?
Firstly, Emotion styled component' styled can style any component as long as it accepts a className prop. https://emotion.sh/docs/styled
Secondly, let's check Ant Design source code, go to Menu component, we will see index.tsx import InternalMenu in this line import InternalMenu from './menu';
Then, we go to menu.tsx, which export InternalMenu component and see its props here const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {...}
And scroll down, in the destructuring part it has const { prefixCls: customizePrefixCls, className,...restProps} = props;
=> Here you can see it accepts className props, which means you can apply what styled component approach which EmotionJS offers.
Have fun!
Binh Truong :)
I am working with react-burger-menu and I am having trouble setting the styles={styles} tag on the menu component, from a CSS module.
Given :
./App.js
import Page from './components/Page/Page';
import SideMenu from './components/sideMenu/SideMenu.js';
import styles from './components/sideMenu/SideMenu.module.css';
function App() {
return (
<div className="app" id="app">
<SideMenu styles={ styles } pageWrapId={ "page-wrap" } outerContainerId={ "app" }/>
<div id="page-wrap">
<Page />
</div>
</div>
);
}
export default App;
./sideMenu/SideMenu.js
import React from "react";
import { scaleRotate as Menu } from "react-burger-menu";
export default props => {
return (
<Menu {...props} >
<a className="menu-item" href="/">
Home
</a>
</Menu>
);
};
./sideMenu/SideMenu.module.css
.bm-burger-button {
position: fixed;
width: 36px;
height: 30px;
right: 36px;
top: 36px;
}
.bm-burger-bars {
background: #373a47;
}
I am unable to pass the prop styles to SideMenu menu bar. The stylesheet is just not read. I have also tried style={styles} instead. If I omit the styles={styles} tag and just put the CSS styling in ./index.css then the styling is rendered correctly but I want to separate the menu styling as a module.
I have also tried to write the
import styles from '../../components/sideMenu/SideMenu.module.css'
inside the sideMenu/SideMenu.js file instead, and return (<Menu {...props} styles={styles}> (...) but still with no success.
Finally, I have also tried to set
<div className="app" id="app" styles={styles}> (...) </div>
in ./App.js as it was suggested in this post but that doesn't work either.
Does anyone know what I am doing wrong?
First, it’s recommend to use camelCase for classes with more than one word. The reason for this is that you’ll access these classes later as properties of a JS object, hyphens are not syntactically allowed. So you must first of all change your SideMenu.module.css for example like this:
.bm_burger_button {
position: fixed;
width: 36px;
height: 30px;
right: 36px;
top: 36px;
}
.bm_burger_bars {
background: #373a47;
}
Import the module you’ve just created from within your component, like you did:
import styles from './components/sideMenu/SideMenu.module.css';
To use a class defined in your module, just refer to it as a normal property from the styles object, like:
<div className={styles.bm_burger_button}> (...) </div>
So I am using react icons and I have two different icons that I am styling with styled components. My issue is that they essentially have the exact same styles, but the only difference is which icon I am choosing to style.
I don't know how to combine both icons into one styled component
Here is my code
const backArrow = styled(IoArrowBack)`
width: 50px;
height: 50px;
`;
const forwardArrow = styled(IoArrowForward)`
width: 50px;
height: 50px;
`;
Since I am using styled components, I just pass the icon into the () based on which one I want to style. The issue is I have over 12 lines of the exact same styles for both icons. It doesn't make sense to repeat the exact styles
How would I create one styled component, but display two different icons?
Example concept like this
const arrowIcon = styled(IoArrowBack, IoArrowForward)`
width: 50px;
height: 50px;
`
But then the issue occurs if I were to add them to my JSX
Cause then how would I even add the code?
I can't do
<arrrowIcon>Back arrow</arrowIcon>
<arrrowIcon>Forward arrow</arrowIcon>
So it wouldn't know which icon is which.
Is this even possible with styled components, or would I just have to copy and paste the same styles for each icon?
This piece of code is a bit weird to me, I think this is not a valid code
const arrowIcon = styled(IoArrowBack, IoArrowForward)`
width: 50px;
height: 50px;
`
However you can do a trick to get a shared style
const sharedIconStyle = css`
width: 50px;
height: 50px;
`
And
const styledArowBack= styled(IoArrowBack)`
${sharedIconStyle}
`
const styledArrowForward = styled(IoArrowForward)`
${sharedIconStyle}
`;
Could you just do it with React?
import React from "react";
import "./styles.css";
import { ReactComponent as icon1 } from "./icons/1.svg";
import { ReactComponent as icon2 } from "./icons/2.svg";
export default function App() {
return (
<div className="App">
<SizedIcon Icon={icon1} />
<SizedIcon Icon={icon2} />
</div>
);
}
const SizedIcon = ({ size = 50, Icon }) => {
console.log(typeof Icon);
return (
<div>
<Icon width={size} height={size} />
</div>
);
};
What I did is wrapped the icons in a div and styled the div, for example change the icon colors to red:
const IconStyles = styled.div`
color: red;
`
<IconStyles>
<IoArrowBack />
</IconStyles>
<IconStyles>
<IoArrowForward />
</IconStyles>
If you want to change the size of the icons then add a font-size in the div containing the icons, that is how I personally do it.
I'm building a small project in ReactJS and I would like to use Semantic-UI (as a main theme of my website) and override some parts of it with Styled Components (like if it was some custom CSS).
When I'm trying to import them on the same component, I've noticed that Styled-Components will use some of the style I wrote but not all of it (like text-size or some margin).
EDIT
Here's the way I've tried to implement them in my component:
import "semantic-ui-css/semantic.min.css";
import { Grid, Form, Segment, Button, Header, Message, Icon } from 'semantic-ui-react';
import { StyledRegister } from '../styles/StyledRegister';
class Register extends React.Component {
...
render() {
return (
<StyledRegister>
<Grid textAlign="center" verticalAlign="middle">
<Grid.Column style={{ maxWidth: 450 }}>
// Here's continue the long code of my register page including form ect...
</Grid.Column>
</Grid>
</StyledRegister>
Do any of you have an idea if it's possible, and if so, is there proper way to do it ?
An example with the custom adapted statistics component of semantic ui:
import "semantic-ui-css/semantic.min.css";
import { StyledStatistic } from "./styledStatistic";
function App() {
return (
<div className="App">
<StyledStatistic>
<StyledStatistic.Value>5,550</StyledStatistic.Value>
<StyledStatistic.Label>Downloads</StyledStatistic.Label>
</StyledStatistic>
</div>
);
}
import styled from "styled-components";
import { Statistic } from "semantic-ui-react";
export const StyledStatistic = styled(Statistic)`
padding: 2rem;
display: flex !important;
justify-content: center;
&&& > .value {
color: red;
}
&&& > .label {
color: green;
}
`;
See: https://codesandbox.io/s/goofy-mestorf-go410
I use the reakt photo gallery library; my component gets an array of images as props and converts it into an array of objects with fields {src, width, height}. Everything works well, but the problem is that I have a specific height for the block, into which the gallery should be inserted. the height of the block is significantly less than the height of the entire block of the gallery, so I assumed that the pictures would scroll horizontally, and they still continue to scroll vertically, how can I make a horizontal scroll?
import React from 'react';
import Gallerys from 'react-photo-gallery';
const Content = styled.div`
height: 700px;
width: auto;
overflow-x: scroll;
img {
border-radius:10px;
}
`;
class Gallery extends React.Component {
render() {
return (
<Content>
<Gallerys direction={'row'} margin={40} photos={images} />
</Content>
);
}
}
export default Gallery;
please check the answer here https://codesandbox.io/embed/lively-sun-zqe7g
Note: Use this in your style.css/ style.scss
//use in css
.react-photo-gallery--gallery div {
flex-flow: nowrap !important;
}
//use in sass/scss
.react-photo-gallery--gallery{
div{
flex-flow: nowrap !important;
}
}