The following component is part of To Do List Application. I would like to create four Filter Buttons (All, Active, Completed, Important). May I please ask how to place Bulma CSS Rules for this react component?
Screenshot 1 -
Filter Buttons Component
import React from "react";
function FilterButton(props){
return (
<button
type="button"
className="buttons"
onClick={()=>props.setFilter(props.name)}
>
<span className="visually-hidden">Show</span>
<span>{props.name}</span>
<span className="visually-hidden">tasks</span>
</button>
);
}
export default FilterButton;
You can use button component like this.
<button
className={`button is-${props.name}`}
onClick={()=>props.setFilter(props.name)}
>
Related
Hi I am writing a react code for a button. Here is the code:
<Button
block={true}
className={`sc-pc-action-button ${className}`.trim()}
disabled={disabled}
onClick={onClick}
> Click me
</Button>
There is a condition in which I dont need this sc-pc-action-button css.
Now this class sc-pc-action-button is hardcoded.
How can I write a CSS which tells me to ignore the contents of sc-pc-action-button and take fresh CSS I am giving.
I need a CSS solution to remove the properties. I don't need JS Solution
<Button
block={true}
className={`${someCondition ? "sc-pc-action-button" : ""} ${className}`.trim()}
disabled={disabled}
onClick={onClick}
> Click me
</Button>
I'm using TailwindCSS and React to build out a menu component with buttons for each Menu Item.
I'm trying to set the button styles to show a purple left border whenever a button is in the focus state.
I've set the styling following the TailwindCSS docs but for some reason the UI is not responding. I've tested single properties and they all work but I can't get border specific properties to cooperate.
I have a Codesandbox for demonstration
import React from "react";
const MenuItem = ({ feature, idx }) => {
return (
<div className="ml-6 active:border-l-8 border-purple600" key={idx}>
<button className="focus:outline-none focus:border-l-6 focus:border-violet-600">
<h4 className="sticky top-0 text-black">{feature.featureCategory}</h4>
</button>
{feature.featureTypes.map((x, idx) => {
return (
<h6 className="pt-4 text-black ml-8" key={idx}>
{x.featureType}
</h6>
);
})}
</div>
);
};
export default MenuItem;
There are a couple of issues with the code you're using.
The TailWind package you're pulling in, via a CDN, is heavily out of date.
6 isn't a default option for border widths in TailWind therefore won't be available via CDN.
Ensure you're using a more current version of TailWind. Then, either add 6 as an option for border width to your config file or add it as a generated style.
Example: https://play.tailwindcss.com/DcVZLcEvqr
<script src="https://cdn.tailwindcss.com"></script>
<button class="focus:outline-none focus:border-l-[6px] focus:border-violet-600">Example Button</button>
I'm very new to Svelte and I want to build a theme for a website.
When I want buttons to have a certain look and animations, do I create a new Button component and use that every time with slots or do I just create a class for this button that has some css code and use the standard html button?
Of course I can do it both ways, but which one is preferred in svelte?
You could use this strategy for theming your application. You can use $$restProps to capture your classes and in your components, you can also set up the events for the buttons.
App.svelte
<script>
import Button from "./Button.svelte"
</script>
<Button class="primary">
My Button
</Button>
<Button class="danger">
My Button
</Button>
Button.svelte
<script>
let buttonProps = {
class:[$$restProps.class]
}
</script>
<button on:click
on:mouseover
on:mouseenter
on:mouseleave
{...buttonProps}>
<slot/>
</button>
<style>
.primary{
color:green;
}
.danger {
color:red;
}
</style>
Example REPL. Components are the right way to go for build large applications.
I'm using material-ui version 3.9.3 in my React application. I want to add a background image on a dialog. I'm using the Dialog component for it but I'm unable to add a background image on the whole dialog.
For example:
<Dialog
fullScreen={fullScreen}
open={this.props.open}
onClose={this.handleClose}
aria-labelledby='responsive-dialog-title'
>
<DialogTitle
id='customized-dialog-title'
onClose={this.handleClose}
noCloseButtonNeeded={noCloseButtonNeeded}
>
{/* some jsx */}
</DialogTitle>
<DialogContent>
{children}
</DialogContent>
</Dialog>
I have tried to add an image using classes and custom CSS but I'm unable to do it.
Can anyone help me out to add it? Thanks in advance :)
First, you can define the background image in a styles object that can be used with the withStyles higher-order component to apply it to the dialog:
const styles = {
dialog: {
backgroundImage: "url(https://i.imgur.com/HeGEEbu.jpg)"
}
};
When you pass this object to the withStyles HOC, it will supply your component with a classes prop containing properties with the same names as the properties on styles that you've defined.
Next, you can apply this class to the Dialog by taking advantage of the classes prop (the specific overrides made available for the Dialog component are detailed here):
<Dialog ... classes={{paper: classes.dialog}}>
{/* ... */}
</Dialog>
This is telling material-ui to merge the styles you have defined in styles.dialog with the default styles on the Paper element that is used with the Dialog.
You'll need to make sure that you're wrapping your component in the withStyles HoC. If you have a class component, it will look something like this:
export default withStyles(styles)(DialogWithBackgroundImage);
For functional components, it would look something like:
export default withStyles(styles)(({open, children, classes}) => (<Dialog ...></Dialog>))
Here's a working example that ties everything together: https://codesandbox.io/embed/q3zy4r2np4
I am using Fontawesome icons in my react and I am using CSS modules in react. Now I want to use this Icon so I am using the following syntax : <i className={styles['fa-user-circle']} ></i>
I cant use normal syntax styles.someClassName because of hyphens in the name of fontawesome icons and also I need to combine fas and fa-user-circle classNames . How do I do that?
Thanks.
You can use the FontAwesome React version here
Implementation of it looks like
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faPlus } from '#fortawesome/free-solid-svg-icons'
and your render component looks like
export default (props) => {
return (
<div>
<FontAwesomeIcon icon={faPlus} className="pointer" onClick={props.onAdd} id={props.id} />
</div>
)
}
As you can see className we can give so whatever the extra CSS you want to give you can.