I'm trying to resize the bullets on the image carousel from 15x15 pixels to 10x10. I see there is no documentation on an available props for this.
What is the best approach to resize the five bullets?
Example: https://codesandbox.io/s/05v4s?file=/src/App.js
import "./styles.css";
import SimpleImageSlider from "react-simple-image-slider";
export default function App() {
const images = [
{ url: "https://www.w3schools.com/howto/img_nature_wide.jpg" },
{ url: "https://www.w3schools.com/howto/img_snow_wide.jpg" },
{ url: "https://www.w3schools.com/howto/img_lights_wide.jpg" },
{ url: "https://www.w3schools.com/howto/img_mountains_wide.jpg" },
{
url:
"https://images.unsplash.com/photo-1478827217976-7214a0556393?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8dG9wfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
}
];
return (
<div className="App">
<SimpleImageSlider
showNavs="true"
width={456}
height={304}
images={images}
showBullets={true}
/>
</div>
);
}
style.css
.App {
font-family: sans-serif;
text-align: center;
}
Related
I tried to change label's margin (see the attached image to the question) from px to em/rem, but i don't know where i should write styles to structure. I can't find in MUI documentation "adjacent sibling combinator".
createTheme({
MuiTextField: {
defaultProps: {
// props
},
styleOverrides: {
root: {
// styles
}
}
}
})
generated css style in inspector tab
If you are using material-ui 5:
import { createTheme } from '#mui/material';
const theme = createTheme({
components: {
MuiTextField: {
styleOverrides: {
root: {
'& label': {
margin: '2rem',
},
},
},
},
},
});
export default theme;
https://mui.com/pt/material-ui/customization/theme-components/
I finally resolve it ;) I added to InputLabel this line "& + .MuiInputBase-root" to change TextField's (and another inputs) label
MuiInputLabel: {
defaultProps: {
// props
},
styleOverrides: {
root: {
// styles
"& +.MuiInputBase-root": {
marginTop: '2em'
}
}
}
}
I'm trying to make a very simple react component that would crop images with react-easy-crop. Apparently it is possible to customize the style of react-easy-crop module with style prop that takes 3 objects: containerStyle, mediaStyle and cropAreaStyle.
This is the default layout:
I want to expand cropArea to full width of its container and to fit media in it by height (so that we don't see the part of the original image outside of cropArea) but can't figure out how to do it. The cropAreaStyle object doesn't seem to affect width or height since it is calculated and injected in the module file (even after setting disableAutomaticStylesInjection to true).
import React from 'react'
import ReactDOM from 'react-dom'
import Cropper from 'react-easy-crop'
import './styles.css'
class App extends React.Component {
state = {
imageSrc:
'https://img.huffingtonpost.com/asset/5ab4d4ac2000007d06eb2c56.jpeg?cache=sih0jwle4e&ops=1910_1000',
crop: { x: 0, y: 0 },
zoom: 1,
aspect: 1 / 1,
style: { containerStyle: { position: "absolute", top: "0", width: "calc(100% - 2px)", height: window.innerWidth, overflow: "hidden", border: "1px solid black" },
mediaStyle: { height: "100%", display: "block" },
cropAreaStyle: {position: "absolute", top: "0", border: "1px solid black", width: "100%", height: "100%" }}
}
onCropChange = (crop) => {
this.setState({ crop })
}
onCropComplete = (croppedArea, croppedAreaPixels) => {
console.log(croppedArea, croppedAreaPixels)
}
onZoomChange = (zoom) => {
this.setState({ zoom })
}
render() {
return (
<div className="App">
<div className="crop-container">
<Cropper
image={this.state.imageSrc}
crop={this.state.crop}
zoom={this.state.zoom}
aspect={this.state.aspect}
onCropChange={this.onCropChange}
onCropComplete={this.onCropComplete}
onZoomChange={this.onZoomChange}
style={this.state.style}
disableAutomaticStylesInjection={true}
/>
</div>
</div>
)
}
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)
This is what I'm trying to achieve:
The black square is cropArea that I can't resize...
I want cropArea to remain square.
Is there an easy way to do this, without changing the module file?
The solution with another module is acceptable also
Thanks in advance
I tried to use the object cropAreaStyle but it's not working, instead use the prop cropSize and don't pass the prop aspect.
In order to get the height of the media pass the prop onMediaLoaded:
onMediaLoad = (mediaSize) => {
this.setState({
cropHeight: mediaSize.height,
});
};
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import Cropper from 'react-easy-crop';
import './style.css';
class App extends React.Component {
state = {
imageSrc:
'https://img.huffingtonpost.com/asset/5ab4d4ac2000007d06eb2c56.jpeg?cache=sih0jwle4e&ops=1910_1000',
crop: { x: 0, y: 0 },
zoom: 1,
cropHeight: 0,
};
onCropChange = (crop) => {
this.setState({ crop });
};
onCropComplete = (croppedArea, croppedAreaPixels) => {
console.log(croppedArea, croppedAreaPixels);
};
onZoomChange = (zoom) => {
this.setState({ zoom });
};
onMediaLoad = (mediaSize) => {
this.setState({
cropHeight: mediaSize.height,
});
};
render() {
const cropSize = {
height: `${this.state.cropHeight}px`,
width: '100%',
};
return (
<div className="App">
<div className="crop-container">
<Cropper
image={this.state.imageSrc}
crop={this.state.crop}
zoom={this.state.zoom}
onCropChange={this.onCropChange}
onCropComplete={this.onCropComplete}
onZoomChange={this.onZoomChange}
onMediaLoaded={this.onMediaLoad}
cropSize={cropSize}
/>
</div>
</div>
);
}
}
export default App;
Demo: https://stackblitz.com/edit/react-4zmgud
It seems that what you need is the objectFit property set to vertical-cover.
See this demo: https://codesandbox.io/s/crazy-liskov-04u7m0
I'm using next-mdx-remote to make use of MDX in my Next.js project.
I've been following JetBrains WebStorm guide to build this, here they've used bootstrap as their CSS but my choice of CSS framework was tailwind css.
The thing is when I install tailwind css or any other CSS based on tailwind css like flowbite, the MDX page loses it's styling.
Expected
What I Get after adding tailwind
tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";
import Script from "next/script";
import Nav from "../components/Nav";
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Head>
{/* <link
rel="stylesheet"
href="https://unpkg.com/#themesberg/flowbite#1.2.0/dist/flowbite.min.css"
/> */}
</Head>
<Script src="https://unpkg.com/#themesberg/flowbite#1.2.0/dist/flowbite.bundle.js" />
<Nav />
<Component {...pageProps} />
</>
);
}
export default MyApp;
globals.css
#tailwind base;
#tailwind components;
#tailwind utilities;
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
[blogId].tsx
// import fs from "fs";
import matter from "gray-matter";
import path from "path";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import { connectToDatabase } from "../../utils/mongodb";
import { ObjectId } from "mongodb";
const BlogPg = ({ frontMatter: { title }, MDXdata }) => {
return (
<div className="px-5 md:px-80 py-10">
<p className="text-5xl mb-4">{title}</p>
<MDXRemote {...MDXdata} />
</div>
);
};
export const getStaticPaths = async () => {
let { db } = await connectToDatabase();
const posts = await db.collection("blogs").find({}).toArray();
const paths = posts.map((post) => ({
params: {
blogId: post._id.toString(),
},
}));
return {
paths,
fallback: false,
};
};
export const getStaticProps = async ({ params: { blogId } }) => {
// const fileContent = fs.readFileSync(
// path.join("posts", blogId) + ".mdx",
// "utf-8"
// );
let { db } = await connectToDatabase();
const post = await db
.collection("blogs")
.find({ _id: new ObjectId(blogId) })
.toArray();
const { data: frontMatter, content } = matter(post[0].text);
const MDXdata = await serialize(content);
return {
props: {
frontMatter,
blogId,
MDXdata,
},
};
};
export default BlogPg;
You may change content to purge and add require('#tailwindcss/typography') to plugins in tailwind.config.js.
And then to see typography changes you should cover your <MDXRemote .../> with a prose named div.
tailwind.config.js
module.exports = {
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [require('#tailwindcss/typography')],
};
[blogId].tsx
...
<div className="prose">
<MDXRemote {...MDXdata} />
</div>
</div>
);
};
...
I am trying to style a React-Bootstrap form so that a few lists of checkboxes have properly outstanding headlines. I want the text "Frontend" "backend" "databases" etc to have a padding of about 10-20 pixels.
How it looks now:
This is not simple HTML/CSS, but what I would like to do is the equivalent of simply adding "padding: 10px" to the headlines "Frontend Frameworks, Frontend, Backend, Databases".
The first thing I tried was adding a CSS stylesheet using className="formLabel" with the style for .formLabel being: padding: 10px. But that doesn't actually push the other elements away as with regular CSS. Instead I get this:
(Border added to make it easier to see what's going on)
I tried adding style={{ paddingBottom: "10px" }} as well in the style of this thread. I also read the React Bootstrap Forms docs page but found no mention of how to style a <Form.Label> element.
So suppose you want to replicate what I've done in those images, see the code below:
// this code should nicely generate a "Homepage" component to use in React
import React, { Component } from "react";
import { Form } from "react-bootstrap";
import "./home.css";
class Homepage extends Component {
state = {
checked: [
{ vue: false, category: "framework" },
{ angular: false, category: "framework" },
{ react: false, category: "framework" },
{ html: false, category: "frontend" },
{ css: false, category: "frontend" },
{ javascript: false, category: "frontend" },
{ python: false, category: "backend" },
{ SQLite: false, category: "database" }
]
};
render() {
return (
// will generate the "framework" and "frontend" checkboxes
<Form>
<Form.Label className="formLabel">
Frontend Frameworks
</Form.Label>
{this.state.checked.map((obj, index) => {
let box = null;
if (obj.category === "framework") {
box = (
<Form.Check
inline
label={Object.keys(obj)[0]} // returns values like "vue"
type={"checkbox"}
id={index}
/>
);
}
return box;
})}
</Form>
<Form>
<Form.Label className="formLabel">Frontend</Form.Label>
{this.state.checked.map((obj, index) => {
let box = null;
if (obj.category === "frontend") {
box = (
<Form.Check
inline
label={Object.keys(obj)[0]} // returns values like "vue", "react"
type={"checkbox"}
id={index}
/>
);
}
return box;
})}
</Form>
)
}
export default Homepage;
// home.css
.formLabel {
font-size: 18px;
margin-bottom: 15px;
}
.testLabel {
font-size: 18px;
padding: 10px;
border: 1px solid black;
}
Try to add "display" to "formLabel" in your stylesheet.
It should be something like this:
.formLabel {
font-size: 18px;
margin-bottom: 15px;
padding: 20px;
display: inline-block;
}
I'm implementing a sidebar following this example but can't figure out how to apply the styles for each className...
This is what I've tried, but there are no styles applied...
Component:
import React from 'react';
import styles from '../stylesheets/menu.css';
var Parent = React.createClass({
getInitialState(){
return {sidebarOpen: false};
},
handleViewSidebar(){
this.setState({sidebarOpen: !this.state.sidebarOpen});
},
render() {
return (
<div>
<Header onClick={this.handleViewSidebar} />
<SideBar isOpen={this.state.sidebarOpen} toggleSidebar={this.handleViewSidebar} />
<Content isOpen={this.state.sidebarOpen} />
</div>
);
}
});
var SideBar = React.createClass({
render() {
var sidebarClass = this.props.isOpen ? 'sidebar open' : 'sidebar';
return (
<div className={sidebarClass}>
<div>I slide into view</div>
<div>Me too!</div>
<div>Meee Threeeee!</div>
<button onClick={this.props.toggleSidebar} className="sidebar-toggle">Toggle Sidebar</button>
</div>
);
}
});
export default Parent;
Styles:
.sidebar {
position: absolute;
top: 60px;
}
.sidebar-toggle {
position: absolute;
top: 20%;
}
.sidebar.open {
left: 0;
}
webpack.config :
module: {
loaders: [
{
test: /\.css$/,
loader: 'css-loader'
}
]
}
Partial folder structure:
client
--stylesheets
----menu.css
--components
----Sidebar.js
You are importing the styles as an object:
import styles from '../stylesheets/menu.css';
This can be used for CSS-in-JS, but in your case it will not work.
Try changing it to:
import '../stylesheets/menu.css';
And it should correctly apply the styles.