How to use classNames method in Best

Best JavaScript code snippet using best

DrinksPage.jsx

Source:DrinksPage.jsx

1import React, { useState } from 'react';2import { connect } from 'react-redux'3import Chevron from 'react-chevron'4import Footer from '../../components/Footer/Footer';5import Product from '../../components/Product/Prodact'6import Navigation from '../../components/Navigation/Navigation';7import MainImage from '../../images/bkg.jpg';8import useStyles from './styles';9const DrinksPage = ( { products } ) => {10  const classNames = useStyles();11  12  const [open, setOpen] = useState(false);13  const [open1, setOpen1] = useState(false);14  const [open2, setOpen2] = useState(false);15  const [open3, setOpen3] = useState(false);16  const [open4, setOpen4] = useState(false);17  const [open5, setOpen5] = useState(false);18  const [open6, setOpen6] = useState(false);19  const [open7, setOpen7] = useState(false);20  const [open8, setOpen8] = useState(false);21  const [open9, setOpen9] = useState(false);22  const [open10, setOpen10] = useState(false);23  const [open11, setOpen11] = useState(false);24  const [open12, setOpen12] = useState(false);25  const [open13, setOpen13] = useState(false);26  const [open14, setOpen14] = useState(false);27  return (28    <div className={classNames.container}>29      <div className={classNames.section}>30        <div31            className={classNames.mainImage}32            style={{33              background: `url(${MainImage}) center center/cover no-repeat`,34            }}>35          <Navigation36            title='Drinks'37          />38          <div className={classNames.menuList}>39              <ul className={classNames.list}>40                <li className={classNames.item}>41                  <div className={classNames.menuItem}>42                    <p className={classNames.menuItemTitle}>Cocktails</p>43                    <button onClick={() => setOpen1(!open1)} className={classNames.button} ><Chevron/></button>44                  </div>45                  {open1 && 46                    <div>{products.filter((item) => item.variant === 'Cocktails').map(product => (47                      <Product key={product.id} product = {product}/>48                    ))}</div>49                  }50                </li>51                <li className={classNames.item}>52                  <div className={classNames.menuItem}>53                    <p className={classNames.menuItemTitle}>Whiskey</p>54                    <button onClick={() => setOpen2(!open2)} className={classNames.button} ><Chevron/></button>55                  </div>56                  {open2 && 57                    <div>{products.filter((item) => item.variant === 'Whiskey').map(product => (58                      <Product key={product.id} product = {product}/>59                    ))}</div>60                  }61                </li>62                <li className={classNames.item}>63                  <div className={classNames.menuItem}>64                    <p className={classNames.menuItemTitle}>Rum</p>65                    <button onClick={() => setOpen3(!open3)} className={classNames.button} ><Chevron/></button>66                  </div>67                  {open3 && 68                    <div>{products.filter((item) => item.variant === 'Rum').map(product => (69                      <Product key={product.id} product = {product}/>70                    ))}</div>71                  }72                </li>73                <li className={classNames.item}>74                  <div className={classNames.menuItem}>75                    <p className={classNames.menuItemTitle}>Gin</p>76                    <button onClick={() => setOpen4(!open4)} className={classNames.button} ><Chevron/></button>77                  </div>78                  {open4 && 79                    <div>{products.filter((item) => item.variant === 'Gin').map(product => (80                      <Product key={product.id} product = {product}/>81                    ))}</div>82                  }83                </li>84                <li className={classNames.item}>85                  <div className={classNames.menuItem}>86                    <p className={classNames.menuItemTitle}>Vodka</p>87                    <button onClick={() => setOpen5(!open5)} className={classNames.button} ><Chevron/></button>88                  </div>89                  {open5 && 90                    <div>{products.filter((item) => item.variant === 'Vodka').map(product => (91                      <Product key={product.id} product = {product}/>92                    ))}</div>93                  }94                </li>95                <li className={classNames.item}>96                  <div className={classNames.menuItem}>97                    <p className={classNames.menuItemTitle}>Tequila</p>98                    <button onClick={() => setOpen6(!open6)} className={classNames.button} ><Chevron/></button>99                  </div>100                  {open6 && 101                    <div>{products.filter((item) => item.variant === 'Tequila').map(product => (102                      <Product key={product.id} product = {product}/>103                    ))}</div>104                  }105                </li>106                <li className={classNames.item}>107                  <div className={classNames.menuItem}>108                    <p className={classNames.menuItemTitle}>Brandy & Cognac</p>109                    <button onClick={() => setOpen7(!open7)} className={classNames.button} ><Chevron/></button>110                  </div>111                  {open7 && 112                    <div>{products.filter((item) => item.variant === 'Brandy & Cognac').map(product => (113                      <Product key={product.id} product = {product}/>114                    ))}</div>115                  }116                </li>117                <li className={classNames.item}>118                  <div className={classNames.menuItem}>119                    <p className={classNames.menuItemTitle}>Liqueur & Bitters</p>120                    <button onClick={() => setOpen8(!open8)} className={classNames.button} ><Chevron/></button>121                  </div>122                  {open8 && 123                    <div>{products.filter((item) => item.variant === 'Liqueur & Bitters').map(product => (124                      <Product key={product.id} product = {product}/>125                      ))}</div>126                  }127                </li>128                <li className={classNames.item}>129                  <div className={classNames.menuItem}>130                    <p className={classNames.menuItemTitle}>Champagne & Sparkling Wine</p>131                    <button onClick={() => setOpen(!open8)} className={classNames.button} ><Chevron/></button>132                  </div>133                  {open && 134                    <div>{products.filter((item) => item.variant === 'Champagne & Sparkling Wine').map(product => (135                      <Product key={product.id} product = {product}/>136                    ))}</div>137                  }138                </li>139                <li className={classNames.item}>140                  <div className={classNames.menuItem}>141                    <p className={classNames.menuItemTitle}>Wine</p>142                    <button onClick={() => setOpen9(!open9)} className={classNames.button} ><Chevron/></button>143                  </div>144                  {open9 && 145                    <div>{products.filter((item) => item.variant === 'Wine').map(product => (146                      <Product key={product.id} product = {product}/>147                    ))}</div>148                  }149                </li>150                <li className={classNames.item}>151                  <div className={classNames.menuItem}>152                    <p className={classNames.menuItemTitle}>Beer</p>153                    <button onClick={() => setOpen10(!open10)} className={classNames.button} ><Chevron/></button>154                  </div>155                  {open10 && 156                    <div>{products.filter((item) => item.variant === 'Beer').map(product => (157                      <Product key={product.id} product = {product}/>158                    ))}</div>159                  }160                </li>161                <li className={classNames.item}>162                  <div className={classNames.menuItem}>163                    <p className={classNames.menuItemTitle}>Soft Drinks</p>164                    <button onClick={() => setOpen11(!open11)} className={classNames.button} ><Chevron/></button>165                  </div>166                  {open11 && 167                    <div>{products.filter((item) => item.variant === 'Soft Drinks').map(product => (168                      <Product key={product.id} product = {product}/>169                    ))}</div>170                  }171                </li>172                <li className={classNames.item}>173                  <div className={classNames.menuItem}>174                    <p className={classNames.menuItemTitle}>Mocktails</p>175                    <button onClick={() => setOpen12(!open12)} className={classNames.button} ><Chevron/></button>176                  </div>177                  {open12 && 178                    <div>{products.filter((item) => item.variant === 'Mocktails').map(product => (179                      <Product key={product.id} product = {product}/>180                    ))}</div>181                  }182                </li>183                <li className={classNames.item}>184                  <div className={classNames.menuItem}>185                    <p className={classNames.menuItemTitle}>Tea & Coffee</p>186                    <button onClick={() => setOpen13(!open13)} className={classNames.button} ><Chevron/></button>187                  </div>188                  {open13 && 189                    <div>{products.filter((item) => item.variant === 'Tea & Coffee').map(product => (190                      <Product key={product.id} product = {product}/>191                    ))}</div>192                  }193                </li>194                <li className={classNames.item}>195                  <div className={classNames.menuItem}>196                    <p className={classNames.menuItemTitle}>Snacks</p>197                    <button onClick={() => setOpen14(!open14)} className={classNames.button} ><Chevron/></button>198                  </div>199                  {open14 && 200                    <div>{products.filter((item) => item.variant === 'Snacks').map(product => (201                      <Product key={product.id} product = {product}/>202                    ))}</div>203                  }204                </li>205              </ul>206          </div>207        </div>208        <Footer/>209      </div>210    </div>211  );212};213const mapStateProps = state =>{214    return {215      products: state.shop.products,216    }217  }...

generic-theme.ts

Source:generic-theme.ts

1import { ITheme } from '../../model/Theme';2import styles from './generic-theme.module.scss';3const pillarPosters: ITheme[] = [4  // Full Poster (5x8)5  {6    id: '8AG0GwlwfMhUG8o',7    code: 'GENERIC',8    name: 'Full Poster (5x8)',9    size: 'pillar',10    classNames: 'pillar',11    backdrop: {12      classNames: `${styles.pillar_full_5x8}`,13    },14    nfts: [15      {16        classNames: 'top--0 left--0',17      },18      {19        classNames: 'top--0 left--20',20      },21      {22        classNames: 'top--0 left--40',23      },24      {25        classNames: 'top--0 left--60',26      },27      {28        classNames: 'top--0 left--80',29      },30      {31        classNames: `${styles.secondRow} left--0`,32      },33      {34        classNames: `${styles.secondRow} left--20`,35      },36      {37        classNames: `${styles.secondRow} left--40`,38      },39      {40        classNames: `${styles.secondRow} left--60`,41      },42      {43        classNames: `${styles.secondRow} left--80`,44      },45      {46        classNames: `${styles.thirdRow} left--0`,47      },48      {49        classNames: `${styles.thirdRow} left--20`,50      },51      {52        classNames: `${styles.thirdRow} left--40`,53      },54      {55        classNames: `${styles.thirdRow} left--60`,56      },57      {58        classNames: `${styles.thirdRow} left--80`,59      },60      {61        classNames: `${styles.fourthRow} left--0`,62      },63      {64        classNames: `${styles.fourthRow} left--20`,65      },66      {67        classNames: `${styles.fourthRow} left--40`,68      },69      {70        classNames: `${styles.fourthRow} left--60`,71      },72      {73        classNames: `${styles.fourthRow} left--80`,74      },75      {76        classNames: `${styles.fifthRow} left--0`,77      },78      {79        classNames: `${styles.fifthRow} left--20`,80      },81      {82        classNames: `${styles.fifthRow} left--40`,83      },84      {85        classNames: `${styles.fifthRow} left--60`,86      },87      {88        classNames: `${styles.fifthRow} left--80`,89      },90      {91        classNames: `${styles.sixthRow} left--0`,92      },93      {94        classNames: `${styles.sixthRow} left--20`,95      },96      {97        classNames: `${styles.sixthRow} left--40`,98      },99      {100        classNames: `${styles.sixthRow} left--60`,101      },102      {103        classNames: `${styles.sixthRow} left--80`,104      },105      {106        classNames: `${styles.seventhRow} left--0`,107      },108      {109        classNames: `${styles.seventhRow} left--20`,110      },111      {112        classNames: `${styles.seventhRow} left--40`,113      },114      {115        classNames: `${styles.seventhRow} left--60`,116      },117      {118        classNames: `${styles.seventhRow} left--80`,119      },120      {121        classNames: `${styles.eigthRow} left--0`,122      },123      {124        classNames: `${styles.eigthRow} left--20`,125      },126      {127        classNames: `${styles.eigthRow} left--40`,128      },129      {130        classNames: `${styles.eigthRow} left--60`,131      },132      {133        classNames: `${styles.eigthRow} left--80`,134      },135    ],136  },137];138const towerPosters: ITheme[] = [139  // Full Poster (3x6)140  {141    id: 'TsmShjgY2AeYBT4',142    code: 'GENERIC',143    name: 'Full Poster (3x6)',144    size: 'tower',145    classNames: 'tower',146    backdrop: {147      classNames: `${styles.tower_full_3x6}`,148    },149    nfts: [150      {151        classNames: `left--0 top--0 ${styles.cNft}`,152      },153      {154        classNames: `left--0 ${styles.secondRow} ${styles.cNft}`,155      },156      {157        classNames: `left--0 ${styles.thirdRow} ${styles.cNft}`,158      },159      {160        classNames: `left--0 ${styles.fourthRow} ${styles.cNft}`,161      },162      {163        classNames: `left--0 ${styles.fifthRow} ${styles.cNft}`,164      },165      {166        classNames: `left--0 ${styles.sixthRow} ${styles.cNft}`,167      },168      {169        classNames: `${styles.secondCol} top--0 ${styles.cNft}`,170      },171      {172        classNames: `${styles.secondCol} ${styles.secondRow} ${styles.cNft}`,173      },174      {175        classNames: `${styles.secondCol} ${styles.thirdRow} ${styles.cNft}`,176      },177      {178        classNames: `${styles.secondCol} ${styles.fourthRow} ${styles.cNft}`,179      },180      {181        classNames: `${styles.secondCol} ${styles.fifthRow} ${styles.cNft}`,182      },183      {184        classNames: `${styles.secondCol} ${styles.sixthRow} ${styles.cNft}`,185      },186      {187        classNames: `${styles.thirdCol} top--0 ${styles.cNft}`,188      },189      {190        classNames: `${styles.thirdCol} ${styles.secondRow} ${styles.cNft}`,191      },192      {193        classNames: `${styles.thirdCol} ${styles.thirdRow} ${styles.cNft}`,194      },195      {196        classNames: `${styles.thirdCol} ${styles.fourthRow} ${styles.cNft}`,197      },198      {199        classNames: `${styles.thirdCol} ${styles.fifthRow} ${styles.cNft}`,200      },201      {202        classNames: `${styles.thirdCol} ${styles.sixthRow} ${styles.cNft}`,203      },204    ],205  },206];207const squarePosters: ITheme[] = [208  // PFP Split (2)209  {210    id: 'j5HjAlAQQQDtFBp',211    code: 'GENERIC',212    name: 'PFP Split (2)',213    size: 'square',214    classNames: `square`,215    backdrop: {216      classNames: `bg-sj-thinrays-blend ${styles.square_pfp_split}`,217    },218    nfts: [219      {220        classNames: `height--90 top--5 left--5 ${styles.split_1_of_2}`,221        shape: 'circle',222      },223      {224        classNames: `height--90 top--5 left--5 ${styles.split_2_of_2}`,225        shape: 'circle',226      },227    ],228  },229  // Bordered Poster Centerpiece (4x4)230  {231    id: '7fIukhaJ6cFJwAj',232    code: 'GENERIC',233    name: 'Bordered Poster Centerpiece (4x4)',234    size: 'square',235    classNames: 'square',236    backdrop: {237      classNames: `${styles.square_border_centeredpiece}`,238    },239    nfts: [240      {241        classNames: `${styles.firstRow} ${styles.firstCol} left--2 top--2`,242      },243      {244        classNames: `$${styles.firstRow} ${styles.secondCol} top--2`,245      },246      {247        classNames: `${styles.firstRow} ${styles.thirdCol} top--2`,248      },249      {250        classNames: `${styles.firstRow} ${styles.fourthCol} top--2`,251      },252      {253        classNames: `${styles.secondRow} ${styles.firstCol} left--2`,254      },255      {256        classNames: `${styles.secondRow} ${styles.secondCol}`,257      },258      {259        classNames: `${styles.secondRow} ${styles.thirdCol}`,260      },261      {262        classNames: `${styles.secondRow} ${styles.fourthCol}`,263      },264      {265        classNames: `${styles.thirdRow} ${styles.firstCol} left--2`,266      },267      {268        classNames: `${styles.thirdRow} ${styles.secondCol}`,269      },270      {271        classNames: `${styles.thirdRow} ${styles.thirdCol}`,272      },273      {274        classNames: `${styles.thirdRow} ${styles.fourthCol}`,275      },276      {277        classNames: `${styles.fourthRow} ${styles.firstCol} left--2`,278      },279      {280        classNames: `${styles.fourthRow} ${styles.secondCol}`,281      },282      {283        classNames: `${styles.fourthRow} ${styles.thirdCol}`,284      },285      {286        classNames: `${styles.fourthRow} ${styles.fourthCol}`,287      },288    ],289  },290];291export const GENERIC_THEMES: ITheme[] = [292  ...pillarPosters,293  ...towerPosters,294  ...squarePosters,...

FoodPage.jsx

Source:FoodPage.jsx

1import React, { useState } from 'react';2import { connect } from 'react-redux'3import Chevron from 'react-chevron'4import Footer from '../../components/Footer/Footer';5import Product from '../../components/Product/Prodact'6import Navigation from '../../components/Navigation/Navigation';7import MainImage from '../../images/bkg.jpg';8import useStyles from './styles';9const FoodPage = ({ products }) => {10  const classNames = useStyles();11  12  const [open, setOpen] = useState(false);13  const [open1, setOpen1] = useState(false);14  const [open2, setOpen2] = useState(false);15  const [open3, setOpen3] = useState(false);16  const [open4, setOpen4] = useState(false);17  const [open5, setOpen5] = useState(false);18 19  return (20    <div className={classNames.container}>21      <div className={classNames.section}>22        <div23            className={classNames.mainImage}24            style={{25              background: `url(${MainImage}) center center/cover no-repeat `,26            }}>27          <Navigation28            title='Food'29          />30          <div className={classNames.menuList}>31              <ul className={classNames.list}>32                <li className={classNames.item}>33                  <div className={classNames.menuItem}>34                    <p className={classNames.menuItemTitle}>Soups</p>35                    <button onClick={() => setOpen1(!open1)} className={classNames.button} ><Chevron/></button>36                  </div>37                  {open1 && 38                    <div>{products.filter((item) => item.variant === 'Soups').map(product => (39                      <Product key={product.id} product = {product}/>40                    ))}</div>41                  }42                </li>43                <li className={classNames.item}>44                  <div className={classNames.menuItem}>45                    <p className={classNames.menuItemTitle}>Appetizers</p>46                    <button onClick={() => setOpen2(!open2)} className={classNames.button} ><Chevron/></button>47                  </div>48                  {open2 && 49                    <div>{products.filter((item) => item.variant === 'Appetizers').map(product => (50                      <Product key={product.id} product = {product}/>51                    ))}</div>52                  }53                </li>54                <li className={classNames.item}>55                  <div className={classNames.menuItem}>56                    <p className={classNames.menuItemTitle}>Salads</p>57                    <button onClick={() => setOpen3(!open3)} className={classNames.button} ><Chevron/></button>58                  </div>59                  {open3 && 60                    <div>{products.filter((item) => item.variant === 'Salads').map(product => (61                      <Product key={product.id} product = {product}/>62                    ))}</div>63                  }64                </li>65                <li className={classNames.item}>66                  <div className={classNames.menuItem}>67                    <p className={classNames.menuItemTitle}>Main Course</p>68                    <button onClick={() => setOpen4(!open4)} className={classNames.button} ><Chevron/></button>69                  </div>70                  {open4 && 71                    <div>{products.filter((item) => item.variant === 'Main Course').map(product => (72                      <Product key={product.id} product = {product}/>73                    ))}</div>74                  }75                </li>76                <li className={classNames.item}>77                  <div className={classNames.menuItem}>78                    <p className={classNames.menuItemTitle}>Sauces & Extras</p>79                    <button onClick={() => setOpen5(!open5)} className={classNames.button} ><Chevron/></button>80                  </div>81                  {open5 && 82                    <div>{products.filter((item) => item.variant === 'Sauces & Extras').map(product => (83                      <Product key={product.id} product = {product}/>84                    ))}</div>85                  }86                </li>87                <li className={classNames.item}>88                  <div className={classNames.menuItem}>89                    <p className={classNames.menuItemTitle}>Desert</p>90                    <button onClick={() => setOpen(!open)} className={classNames.button} ><Chevron/></button>91                  </div>92                  {open && 93                    <div>{products.filter((item) => item.variant === 'Desert').map(product => (94                      <Product key={product.id} product = {product}/>95                    ))}</div>96                  }97                </li>98              </ul>99          </div>100        </div>101      <Footer/>102      </div>103    </div>104  );105};106const mapStateProps = state =>{107  return {108    products: state.shop.products,109  }110}...

table.ts

Source:table.ts

1import { GridColumnDefinition } from "..";2/**3 * For table layout only4 */5export type ClassNameSingular = string | undefined | null | {[key:string]:boolean}6export type ClassNames = ClassNameSingular | ClassNameSingular[]7export interface TableClassNames<T> {8  tableWrapper?: ClassNames,9  actionGenericToolbar?: ClassNames,10  table?: ClassNames;11  thead?: ClassNames;12  theadRow?: ClassNames;13  theadCell?: ClassNames | ((column: GridColumnDefinition<T>) => ClassNames);14  theadCellActionsStart?: ClassNames,15  theadCellActionsEnd?: ClassNames,16  tbody?: ClassNames;17  tbodyRow?: ClassNames | ((item: T) => ClassNames);18  tbodyCell?: ClassNames | ((item: T, column: GridColumnDefinition<T>) => ClassNames);19  tbodyRowExtra?: ClassNames | ((item: T) => ClassNames);20  tbodyCellExtra?: ClassNames | ((item: T) => ClassNames);21  tbodyCellActionsStart?: ClassNames | ((item: T) => ClassNames),22  tbodyCellActionsEnd?: ClassNames | ((item: T) => ClassNames),23  tfoot?: ClassNames;24  tfootRow?: ClassNames;...

Using AI Code Generation

1import React, { Component } from 'react';2import './App.css';3class App extends Component {4  render() {5    return (6          <img src={logo} className="App-logo" alt="logo" />7    );8  }9}10export default App;11.App {12  text-align: center;13}14.App-logo {15  animation: App-logo-spin infinite 20s linear;16  height: 80px;17}18.App-header {19  background-color: #222;20  height: 150px;21  padding: 20px;22  color: white;23}24.App-title {25  font-size: 1.5em;26}27.App-intro {28  font-size: large;29}30@keyframes App-logo-spin {31  from { transform: rotate(0deg); }32  to { transform: rotate(360deg); }33}34import React from 'react';35import ReactDOM from 'react-dom';36import './index.css';37import App from './App';38import registerServiceWorker from './registerServiceWorker';39ReactDOM.render(<App />, document.getElementById('root'));40registerServiceWorker();41body {42  margin: 0;43    sans-serif;44  -webkit-font-smoothing: antialiased;45  -moz-osx-font-smoothing: grayscale;46}47code {48    monospace;49}50import { unregister } from './registerServiceWorker';51unregister();52export function unregister() {53  if ('serviceWorker' in navigator) {54    navigator.serviceWorker.ready.then(registration => {55      registration.unregister();56    });57  }58}59{

Using AI Code Generation

1import classNames from 'classnames';2const Button = ({ className, outline, children }) => {3  return (4      className={classNames('button', className, {5      })}6      {children}7  );8};9export default Button;10import React from 'react';11import Button from './components/Button';12function App() {13  return (14  );15}16export default App;17import React from 'react';18import ReactDOM from 'react-dom';19import App from './App';20import './index.scss';21ReactDOM.render(<App />, document.getElementById('root'));

Using AI Code Generation

1import React from "react";2import "./styles.css";3export default function App() {4  return (5  );6}7.App {8  text-align: center;9}10.container {11  display: flex;12  flex-direction: row;13  justify-content: center;14  align-items: center;15}16.box {17  width: 100px;18  height: 100px;19  margin: 20px;20  border: 1px solid black;21  border-radius: 5px;22  display: flex;23  justify-content: center;24  align-items: center;25}26.red {27  background-color: red;28}29.blue {30  background-color: blue;31}32.green {33  background-color: green;34}35.yellow {36  background-color: yellow;37}38import React from "react";39import ReactDOM from "react-dom";40import App from "./App";41import "./styles.css";42ReactDOM.render(<App />, document.getElementById("root"));43import React from "react";44import "./styles.css";45export default function App() {46  return (47        <div style={redStyle}>Red</div>48        <div style={blueStyle}>Blue</div>49        <div style={greenStyle}>Green</div>50        <div style={yellowStyle}>Yellow</div>51  );52}53const redStyle = {

Using AI Code Generation

1import React from 'react';2import ReactDOM from 'react-dom';3import './index.css';4class Button extends React.Component {5  render() {6    return (7      <button className={this.props.classNames}>8        {this.props.label}9    );10  }11}12ReactDOM.render(13  document.getElementById('root')14);15.btn {16  padding: 10px 20px;17  border-radius: 5px;18  font-size: 16px;19  font-weight: bold;20}21.btn-primary {22  background-color: #2e6da4;23  color: white;24}25import React from 'react';26import ReactDOM from 'react-dom';27import './index.css';28class Button extends React.Component {29  render() {30    return (31      <button className={this.props.classNames}>32        {this.props.label}33    );34  }35}36ReactDOM.render(37  document.getElementById('root')38);39.btn {40  padding: 10px 20px;41  border-radius: 5px;42  font-size: 16px;43  font-weight: bold;44}45.btn-primary {46  background-color: #2e6da4;47  color: white;48}49import React from 'react';50import ReactDOM from 'react-dom';51import './index.css';52class Button extends React.Component {53  render() {54    return (55      <button className={this.props.classNames}>56        {this.props.label}57    );58  }59}60ReactDOM.render(61  document.getElementById('root')62);63.btn {64  padding: 10px 20px;65  border-radius: 5px;66  font-size: 16px;67  font-weight: bold;68}69.btn-primary {70  background-color: #2e6da4;71  color: white;72}73import React from 'react';74import ReactDOM from 'react-dom';75import './index.css';

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.