SQL Script to Backup all SQL Server Databases Backup all databases on your server using T-SQL is a much simpler and faster. Below T-SQL script will generate backup of all databases with date stamp in backup file name. Update the backup path in below script. DECLARE @dbname NVARCHAR(256) DECLARE @filepath NVARCHAR(512) DECLARE @fileName NVARCHAR(512) DECLARE @Date NVARCHAR(40) -- Database backup directory SET @filepath = 'D:\backup\' -- filename format SELECT @Date = CONVERT(NVARCHAR(20),GETDATE(),110) DECLARE backup_cursor CURSOR READ_ONLY FOR SELECT name FROM master.sys.databases WHERE name NOT IN ('master','model','msdb','tempdb') -- exclude system databases AND state = 0 -- Online database AND is_in_standby = 0 -- database is not read only for log shipping OPEN backup_cursor FETCH NEXT FROM backup_cursor INTO @dbname WHILE @@FETCH_STATUS = 0 BEGIN SET @fileName = @filepath + @dbname + '_' + @Date + '.bak' BACKUP DATABASE @dbname TO DISK = @fileName WITH INIT FETCH NEXT FROM backup_cursor INTO @dbname END CLOSE backup_cursor DEALLOCATE backup_cursor

styled-components - putting styling in a separate file and import it in to component

Fayyazuddin

In the bellow React component, I'm using styled-components library for the purpose of styling.

import React from 'react'
import jsonResponse from '../data'
import styled from 'styled-components'

const StyledUl = styled.ul`
    width: 100%;
`

const StyledLi = styled.li`
    width: 100%;

    /*  Tablet View  */
    @media (min-width: 45.563em) and (max-width: 61.312em) {
        width: 50%;
    }

    /*  Desktop View  */
    @media (min-width: 61.313em) {
      width: 33.33%;
    }
`

const TextContainer = styled.div`
    text-align: left;
`

const Btn = styled.button`
    width: 26%;

    @media (min-width: 45.563em) and (max-width: 61.312em) {
      width: 42%;
    }

    @media (min-width: 61.313em) {
      width: 42%;
    }
`

function MyList ({ setID }) {
  const list = jsonResponse.characters.map((item) => {
    return (
      <StyledLi key={item.id}>
        <TextContainer>
          <h3>{item.name}</h3>
          <p>{item.details.short}</p>
        </TextContainer>
        <Btn onClick={() => setID(item.id)}>Read more</Btn>
      </StyledLi>
    )
  })

  return (
    <StyledUl className='cf'>
      {list}
    </StyledUl>
  )
}

export default MyList

Now I want to cut the styling part and put it in a separate file called myList-styling.js and import it in to my component MyList.jsx, but I'm not sure how.

Could you please help?