How can I add CSS for react semantic UI ? I am using create react app. I have installed semantic-ui-react and CSS CDN: https://react.semantic-ui.com/usage/?fbclid=IwAR3ZBaJfpxHGiNcAvophLp7IAPO-gHZfDvSOLs8h-n0-_29ncPoOdjwCX7o#content-delivery-network-cdn
loginForm.js:
import React from "react";
import { Button, Form, Header } from "semantic-ui-react";
import styles from './loginForm.css';
const LoginForm = () => (
<Form className={styles.formStyle}>
<Button className={styles.buttonStyle}>Login</Button>
</Form>
);
export default LoginForm;
loginForm.css:
.formStyle {
margin-left: 500px;
margin-top: 100px;
width: 550px;
}
.buttonStyle {
border-radius: 18px;
width: 200px;
background-color:#3865FE;
}
Above CSS code is not working for loginForm.js why so ? I also tried following :
<Form style={styles.formStyle}>
<Button style={styles.buttonStyle}>Login</Button>
</Form>
Above code is also not working.
Actually you're setting the value of className incorrectly.
Here is the modified version of your code.
import React from "react";
import { Button, Form, Header } from "semantic-ui-react";
import from './loginForm.css';
const LoginForm = () => (
<Form className='formStyle'>
<Button className='buttonStyle'>Login</Button>
</Form>
);
export default LoginForm;
and for loginForm.css
.ui.form.formStyle {
margin-left: 300px ;
margin-top: 100px ;
width: 550px ;
height: 400px;
}
.ui.button.buttonStyle {
border-radius: 18px;
width: 200px;
background-color:#3865FE;
}
thanks #funJoker for suggesting me how to edit semantic-ui style.
Related
Having the following components:
<CheckboxGroupLabel htmlFor={option.label}>
<FormCheckbox
onClick={() => onChange}
key={option.label}
defaultChecked={defaultChecked}
{...rest}
/>
{option.value}
</CheckboxGroupLabel>
Their styled components are:
import styled from 'styled-components';
import * as Checkbox from '#radix-ui/react-checkbox';
export const CheckboxGroupLabel = styled.label`
background-color: red;
display: flex;
width: 100%;
margin: 18px;
line-height: 20px;
cursor: pointer;
width: 100px;
`;
export const StyledCheckboxRoot = styled(Checkbox.Root)`
button {
all: unset;
}
`;
So the checkbox is inside label but only checkbox is clickable, I would like to make the whole label clickable.
Is there a way to do that?
Have you tried just moving onClick into CheckboxGroupLabel?
https://codesandbox.io/s/label-onclick-3ebkbi
import "./styles.css";
import * as Checkbox from "#radix-ui/react-checkbox";
import { CheckIcon } from "#radix-ui/react-icons";
export default function MyComponent() {
const onLabelClick = () => {
console.log("clicked label");
};
return (
<div>
<label onClick={onLabelClick} htmlFor="mycheckbox">
<Checkbox.Root className="checkbox" defaultChecked id="mycheckbox">
<Checkbox.Indicator className="indicator">
<CheckIcon />
</Checkbox.Indicator>
My checkbox label
</Checkbox.Root>
</label>
</div>
);
}
Whenever I try to style Antd Design component ( Layout, Sider and so on ) but it doesn't seems to be working. Therefore there won't be any changes on them. But it works fine on other HTML elements like div, h1, p tags.
Here's my code:
.sidbar{
flex: 1;
background-color: red;
border-right: 0.5px solid rgb(218, 217, 217);
min-height: 100vh;
background-color: white;
}
import styles from "../styles/Sidebar.module.scss";
import React from "react";
import { Layout, Menu } from "antd";
const { Header, Content, Footer, Sider } = Layout;
import {
HomeOutlined,
DashboardOutlined,
TeamOutlined,
} from "#ant-design/icons";
import Link from "next/link";
const Sidebar = () => {
return (
<div>
<Layout className={styles.sidebar}>
<Header>header</Header>
<Layout>
<Sider>left sidebar</Sider>
<Content>main content</Content>
<Sider>right sidebar</Sider>
</Layout>
<Footer>footer</Footer>
</Layout>
</div>
);
};
export default Sidebar;
I would like to create one component that included the dot between 2 elements. the code I have is like following, However, I tried to use span element then create css so I can display . between 2 span. but react does not generate the dot between 2 span. I also tried to use div and then dot did display but format of 2 element does not align at center
//html
import "./styles.css";
export default function App() {
return (
<div className="panel-section">
<div className="panel-header">
<div className="panel-title">
{/** use div format is not correct */}
<div>May 1st 5:31PM</div>
<div className="panel-dot"></div>
<div>Google</div>
{/** dot is not generated
<span>May 1st 5:31PM</span>
<span className="panel-dot"></span>
<span>Google</span>
*/}
</div>
</div>
</div>
);
}
//css
.panel {
width: 600px;
height: 500px;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
left: 0.5%;
right: 33.44%;
}
.panel-title {
padding: 8px;
color: #ffffff;
background-color: #3aac6f;
}
.panel-dot {
width: 4px;
height: 4px;
background: #3aac6f;
align-self: center;
}
codepen:
You can try this :
App.js
import React from 'react';
import './style.css';
export default function App() {
return (
<div className="panel-section">
<div className="panel-header">
<div className="panel-title">
<span>May 1st 5:31PM</span>
<span>Google</span>
</div>
</div>
</div>
);
}
style.css
.panel-title span:first-of-type::after {
content: '.';
}
Demo : Stackblitz
OR
App.js
import React from 'react';
import './style.css';
export default function App() {
return (
<div className="panel-section">
<div className="panel-header">
<div className="panel-title">
<span>May 1st 5:31PM</span>
<span>{"."}</span>
<span>Google</span>
</div>
</div>
</div>
);
}
I use the npm package use-dark-mode as the name implies, it makes it possible to change the theme to light or dark, The problem is that I want to change the background-color of some blocks when changing the theme to dark, and vice versa, return the old color when I switch to light mode, for example, my block background is orange, I switch to dark mode, it turns red and when I switch to light mode, it returns old orange
App.js
import React from 'react';
import './App.css'
import Content from "./components/Content/Content";
import Dark_Mode from "./components/Dark Mode/Dark_Mode";
const App = () => {
return(
<div>
<Dark_Mode />
<Content />
</div>
);
};
export default App;
Content.jsx
import React from 'react';
import './style.css'
const Content = () => {
return (
<>
<div className={"content_container"}>
<h3>Hello from React.JS</h3>
</div>
</>
);
};
export default Content;
Dark_Mode.jsx
import React from 'react';
import useDarkMode from 'use-dark-mode';
const DarkModeToggle = () => {
const darkMode = useDarkMode(false);
return (
<div>
<button type="button" onClick={darkMode.disable}>
☀
</button>
<button type="button" onClick={darkMode.enable}>
☾
</button>
</div>
);
};
export default DarkModeToggle;
style.css
#import '../../App.css';
.content_container {
margin: auto;
width: 500px;
max-width: 100%;
background: orange;
}
.content_container h3 {
text-align: center;
}
App.css
body.light-mode {
background-color: #fff;
color: #333;
transition: background-color 0.3s ease;
}
body.dark-mode {
background-color: #1a1919;
color: #999;
}
:root {
--color-orange: orange;
}
As you can see, I have App.css when the theme changes, it changes the background of the <body>, I still have Content.jsx when switching theme I want to change the background of the block with the className content_container which is connected to style.css, In addition, you may have noticed that I tried to use global styles, but I failed. Finally, I would like to show a screenshot on the site for a clear understanding of everything.
You could give the root element a class on theme change and use css variables in root, but be class specific:
Dark_mode.jsx:
function setTheme(themeName) {
document.documentElement.classList.remove('light-theme', 'dark-theme');
document.documentElement.classList.add(themeName);
}
const DarkModeToggle = () => {
const activateDarkTheme = () => setTheme('dark-theme');
const activateLightTheme = () => setTheme('light-theme');
return (
<div>
<button type="button" onClick={activateDarkTheme}>
☀
</button>
<button type="button" onClick={activateLightTheme}>
☾
</button>
</div>
);
};
Styles:
:root, // this is used for the default theme, will be overwritten by other styles with classes because of specifity
:root.dark-theme {
--color-bg: #000;
}
:root.light-theme {
--color-bg: #fff;
}
I found a more convenient solution! although it is my fault, I was a little inattentive and did not study the documentation of this package that I use in my project, here is a simple solution
Content.jsx
import './Content.css'
import useDarkMode from 'use-dark-mode';
export default function Content () {
const { value } = useDarkMode(false);
return <div>
<div className={value ? 'Dark_Mode' : 'Light_Mode'}>
<h3>Hello from React.JS</h3>
</div>
</div>
}
Content.css
.Dark_Mode {
margin: auto;
max-width: 100%;
width: 400px;
height: 275px;
background-color: orange;
}
.Light_Mode {
margin: auto;
max-width: 100%;
width: 400px;
height: 275px;
background-color: rgb(24, 106, 199);
}
I have a react app:
index.js
import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "#material-ui/styles";
import { CssBaseline } from "#material-ui/core";
import Themes from "./themes";
import App from "./components/App";
import * as serviceWorker from "./serviceWorker";
import { LayoutProvider } from "./context/LayoutContext";
import { UserProvider } from "./context/UserContext";
import { GridPaginationProvider } from "context/GridPaginationContext";
import { ConfirmDialogServiceProvider } from "context/ConfirmDialogContext";
import "bootstrap/dist/css/bootstrap.css";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-material.css";
ReactDOM.render(
<LayoutProvider>
<UserProvider>
<GridPaginationProvider>
<ConfirmDialogServiceProvider>
<ThemeProvider theme={Themes.default}>
<CssBaseline />
<App />
</ThemeProvider>
</ConfirmDialogServiceProvider>
</GridPaginationProvider>
</UserProvider>
</LayoutProvider>,
document.getElementById("root")
);
serviceWorker.unregister();
here's the modal component:
import React from "react";
import { Button } from "#material-ui/core";
import { Modal, ModalHeader, ModalBody } from "reactstrap";
import "./confirm-dialog.scss";
const ConfirmDialog = ({
modalOptions,
open,
title,
icon,
variant,
description,
buttonTexts,
onSubmit,
onClose
}) => {
return (
<Modal isOpen={open} toggle={onClose} {...modalOptions} zIndex={1201}>
<ModalHeader toggle={onClose}>{title}</ModalHeader>
<ModalBody>
<div className="dialog">
<div className="dialog-icon">
<img src={icon} alt="icon" />
</div>
<div className="dialog-content">{description}</div>
<div className="dialog-actions">
<Button variant="contained" color="primary" onClick={onSubmit}>
{buttonTexts && buttonTexts.ok}
</Button>
<Button variant="contained" color="secondary" onClick={onClose}>
{buttonTexts && buttonTexts.cancel}
</Button>
</div>
</div>
</ModalBody>
</Modal>
);
};
export default ConfirmDialog;
confirm-dialog.scss
.modal {
z-index: 1201 !important;
&-content {
border-radius: 20px;
}
&-body {
padding: 0 30px 40px;
}
}
.dialog {
text-align: center;
&-content {
font-size: 16px;
color: #272727;
padding: 22px 0;
}
&-actions {
button {
margin: 0 10px;
font-size: 14px;
font-weight: normal;
min-width: 110px;
}
}
}
The problem is the css in confirm-dialog.scss is not overriding the bootstrap.css's .modal-* classes.
I don't understand what's the problem. The confirm dialog component has its own styles which should override the CSS from .css files imported in index.js file. The modal get triggered by a custom react-hook. The same modal dialog is working in my other project but in this project, the global bootstrap CSS is taking precedence over the confirm-dialog's own .scss.
Nevermind, figured it out. I just had to move all .css imports before App.js import in index.js file.